托管业务开发组前端代码开发规范
遵循招商证券信息技术中心Web开发规范V1.0，请先务必阅读，以下为开发规范补充点
CSS 格式规范
[建议] class 采用 BEM 命名方式，如下
- .blockName-elementName--modifierName，中间-不能超过3个
- .blockName_elementName__modifierName 中间-不能超过3个 (React 中采用)
示例
.header-btn--small
.header_btn__samll
1
2
3
4
5
6
7
2
3
4
5
6
7
[建议] 在采用 BEM 命名方式下，除非为标签元素（如p, div, input）,class 不允许嵌套使用
示例
.header-btn--small {
label {
color: #000;
}
}
1
2
3
4
5
6
2
3
4
5
6
JS 格式规范
[强制] 声明静态变量替换未经预先定义的常量
/* good */
const BASIC_BILL_COUNT = 75;
if (billCount > BASIC_BILL_COUNT) {
// todo
}
/* bad */
if (billCount > 75) {
// todo
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
[强制] 对于复杂的表达式，采用有意义命名的变量赋值定义
/* good */
const isActiveProject = value > 60 && value <= 80 && type = 1;
if (isActiveProject) {
// todo
}
/* bad */
if (value > 60 && value <= 80 && type = 1) {
// todo
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
[强制] 对于实现特定功能的代码块，采用有意义的函数名定义封装
[强制] 函数体的长度不超过 80 行
[建议] 封装函数为为纯函数，不要依赖函数外部变量和作用域
[建议] 不要从 import 中直接 export
/* good */
export { es6 as default } from './airbnbStyleGuide';
/* bad */
import { es6 } from './AirbnbStyleGuide';
export default es6;
1
2
3
4
5
6
2
3
4
5
6
React 规范
[建议] 优先使用 hooks 组件而非 class 组件
[强制] 属性传参不能采用对象形式
/* good */
<Btn size="large" type="primary" />
// 或者
const ops = { size: 'large', type="primary" }
<Btn ...opts/>
/* bad */
const opts = { size: 'large', type="primary" }
<Btn options={opts} />
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
[建议] 合理拆分组件，组件功能独立内聚，每个组件的 render 函数不超过 100 行
[建议] 函数组件导出采用 React.memo 包裹
/* good */
const Btn = () => (<button></button>)
export default React.memo(Btn)
/* bad */
const Btn = () => (<button></button>)
export default Btn
1
2
3
4
5
6
7
2
3
4
5
6
7
[建议] 函数组件变量采用 useMemo 包裹，函数采用 useCallback 包裹
[建议] 如果组件业务逻辑和 UI 没有耦合，封装 hook 并且导出，方便 hook 复用
[建议] 封装组件时采用职责单一原则，复杂组件是有多个功能 hook 和组件组合而成
[建议] 回调事件函数采用 on + 动作命名方式
/* good */
<CustomComp onShow={onShow} >/
/* bad */
<CustomComp show={onShow} >/
1
2
3
4
5
2
3
4
5
杂项规范
[建议] 所有设置 cookie，localStorage，sessionStorage 的 key 值，采用静态常量定义，不能直接使用字符常量
/* good */
const STORAGE_NAME = 'name' // 使用单独文件存储常量
localStorage.set(STORAGE_NAME, 'value')
localStorage.get(STORAGE_NAME)
/* bad */
localStorage.set('name', 'value')
localStorage.get('name', 'value')
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
model 使用规范
model 分为 UIModel 和 DataModel
UIModel 存放的是页面 UI 共享数据，和领域数据无关
DataModel 即数据模型，指的是某个领域的数据模型的聚合体，例如用户信息的增删改查，就是一个 userModel
一个页面对应一个 UIModel 和多个 DataModel
model 作为数据层，只存放跨组件共享数据，组件UI状态由组件本体维护，model 层尽可能轻量
避免将 form 表单数据存储于 model 中，若存在 form 表单数据需要组件间共享的需求，可以在适当时机将数据存入 model，避免表单数据频繁更新 model UIModel 只在页面根组件注入，根组件为容器组件，只负责 props 数据传递，DataModel 可在任何组件调用 如果页面比较复杂， 为了避免 model 过重，可以按业务划分 model，并且将页面划分为多个区块，每个区块对应一个 UIModel， 在区块组件注入 UIModel model 继承 Model 接口，采用 ts 文件编写 model scope 有两种形式，一种是全局 gobal，一种是页面 page，推荐使用页面形式，如果页面间需要共享状态，则需设置为全局形式