代码编写指南

本节将介绍如何在 2.B 样板中正确编写代码

在哪编写代码？

我们推荐在 packages-user 中编写代码，在这里你可以享受到完整的类型支持与代码补全。展开 packages-user 文件夹，可以看到里面分为了多个文件夹。我们应该主要在 client-modules 和 data-state 中编写代码，分别是渲染层和数据层的主要代码位置。其余内容一般是系统底层相关的代码，如果看不懂的话不建议修改。

graph LR
    root(package-user)
    root --> A(client-modules) --> A1(渲染层主要代码)
    root --> B(data-base) --> B1(数据层底层代码)
    root --> C(data-fallback) --> C1(数据层向后兼容代码)
    root --> D(data-state) --> D1(数据层游戏状态代码)
    root --> E(data-utils) --> E1(数据层工具代码)
    root --> F(entry-client) --> F1(渲染层入口代码)
    root --> G(entry-data) --> G1(数据层入口代码)
    root --> H(legacy-plugin-client) --> H1(遗留渲染层代码)
    root --> I(legacy-plugin-data) --> I1(遗留数据层代码)

如何使用模块化引入？

在引入时，需要严格遵循如下原则：

同一模块间使用相对路径引入 ./xxx
不同模块间使用绝对路径引入 @user/xxxx

例如，如果你在 @user/client-modules 中引入自身的代码，就需要使用 import { xxx } from './xxx，如果你需要在 @user/client-modules 引入 @user/data-base 中的代码，就需要使用 import { xxx } from '@user/data-base' 引入。

:::warning 注意，在之后的所有文档示例中，都会使用 import xxx from '@xxx/xxx' 的绝对路径形式作为示例，而不会使用相对路径，自己编写代码时请注意要引入的内容是否在当前模块（当前包）中，如果是，请使用相对路径，否则请使用绝对路径。 :::

使用 TypeScript

所有代码使用 TypeScript 编写，后缀名为 .ts 或 .tsx，其中前者表示一般代码，后者表示 UI 代码（即包含 XML 的代码）

编写代码时，需要保证类型正确。如果搞不明白类型系统，类型就写 any（但是极其不推荐！这会使得自动补全也消失！）

TypeScript 类型系统教程可以查看我编写的教程

渲染层与数据层分离

渲染层可以直接引用数据层代码，但是数据层不能直接引用渲染层代码，具体请查看系统说明

避免循环引用依赖

需要避免两个包之间循环引入。如果出现了循环引入，请考虑将它们挪到一个包里面，或者将循环的部分单独拿出来作为一个包。

2.7 KiB Raw Blame History