项目基础文件目录结构
├── README.md
├── config-overrides.js
├── package-lock.json
├── package.json
├── public
│ └── index.html # cra打包模版文件
├── react-app-env.d.ts
├── src
│ ├── assets # 静态资源
│ ├── components # 通用业务组件
│ ├── context.tsx # 全局配置
│ ├── declaration.d.ts
│ ├── index.tsx # 入口文件
│ ├── layout.tsx # 布局
│ ├── locale # 国际化语言包
│ ├── mock # 公共组件模拟数据
│ ├── pages # 页面模版
│ ├── react-app-env.d.ts
│ ├── routes.ts # 路由配置
│ ├── settings.json # 配置文件
│ ├── store # redux状态管理
│ ├── style # 全局样式
│ └── utils # 工具库
├── tsconfig-base.json
├── tsconfig.json
└── yarn.lock
高质量代码编写原则
-
增加代码可读性———注释清晰、命名语义化
-
提高代码重用性———公共组件和私有组件的放置位置与维护
设计公用组件时，将其放置在/src/components/*目录下，需要考虑让接口保持弹性，并且高度模块化，多处重复使用不允许轻易被修改，有专人维护必要时需要提供 REAME.md 使用说明或规范的 API 文档和演示 DEMO。 设计某私有页面/模块内部组件，将其放置在/src/page/*目录下，由该模块负责人维护，在内部注释功能。 -
磨刀不误砍柴工———前期的构思很重要
构思主要内容：规范的制定、公共组件的设计和复杂功能的技术方案等。 -
团队沟通交流
技术分享和codeReview
命名规范
前提：一切命名以通俗易懂为基准原则
文件命名规范
- 以小写字母开头，采用驼峰式命名
- 命名应当具有语义，并且避免与基础组件冲突
变量命名规范
驼峰式，通俗易懂即可
事件/方法命名规范
-
动作事件
[handle|click|change|drag][事件名][作用dom]。例如：
点击搜索按钮：
handleSearchButton点击过滤按钮：
clickFilterRadio更改某某选项：
changeUserSelect -
数据处理/工具封装方法
通俗易懂即可
注释规范
对于一些业务上的复杂处理方法，尽可能的将其功能、参数、返回值一一说明。举例：
/**
* 对某资源鉴权
* params: resource + actions
* userPermission: 用户所拥有的权限
* return：返回内容
**/
const auth = (params: Auth, userPermission: UserPermission) => {
const { resource, actions = [] } = params;
// 当前 resource 是一个正则
if (resource instanceof RegExp) {
const permKeys = Object.keys(userPermission);
// 获取用户与之匹配的资源
const matchPermissions = permKeys.filter((item) => item.match(resource));
// 对匹配的所有资源的权限进行判断。
return matchPermissions.every((key) => {
const perm = userPermission[key];
return judge(actions, perm);
});
}
// resource 是一个简单的字符串。
const perm = userPermission[resource];
return judge(actions, perm);
};
