前端代码规范文档
- 命名规范
- 代码书写规范
- 代码提交规范
命名规范
-
项目命名
-
全部采用小写方式， 以下划线分隔，其中命名需要与项目名称挂钩。
- 例： my_project_name
-
-
目录文件命名
-
命名规则
-
views模块的文件夹需要和一级菜单保持一致，否则命名功能名称，状态容器的文件夹目录需要和views模块对应
-
-
- 有复数结构时，要采用复数命名法。
例：`models`, `assets`, `views`, `components`, `servieces`, `utils`
- 文件命名需要突出作用
例： 字典文件，就是XXXDict
业务方法，xxxUtil
- views的单独模块，有必要抽出字典与业务方法，建立文件夹命名businessUtils ，文件名称命名如下
例：xxxDict ------- searchComplateDict.tsx
xxxUtil --------- userSessionHomePageUtil.tsx
- less文件命名
例：xxx.module.less --------- index.module.less
- 组件Component命名，所有组件首写字母必须大写，然后驼峰格式
例： ModuleSelectFilter
- 有截图功能的图形模块，views文件夹下面建立文件夹命名rcUnit，文件名称需要包含功能
例：userSessionMap.tsx || chart.tsx(模块只有一种图形可以这么写)
- 路由地址需要和文件名称保持一致，路由文件夹名称以及位置需要和项目一级菜单保持一致，否则和功能保持一致,路由地址小写驼峰形式
代码书写规范
-
代码中使用eslint，统一安装prettier插件，格式化代码
-
ts、js、tsx、jsx文件书写完需要格式化代码再提交，确保代码风格一致
-
避免重复性代码，编码前先设计，多抽象、多解耦，保证组件独立性，数据驱动方式可降低组件之间的耦合，尽量不使用强关联绑定组件关系
-
命名(使用功能命名，尽量不使用缩写，保证代码阅读性，确保名称与内容一致)
- 常量全部大写，使用下划线连接
- 变量和函数使用小驼峰形式命名
- 类和构造函数首写字母需要大写
-
项目中ts少使用或者不使用any，可以多使用ts泛型
-
防止hooks泛滥，自定义hooks需要理解hooks的本质和应用场景
-
高频使用的方法，挂载到全局，避免频繁引入，使用更便捷
-
函数功能单一性，避免一个函数包含过多功能，导致代码庞大或逻辑不够清晰难以理解，尽量保证每个函数只有一个功能
-
公用代码可测试，在编写公用工具方法和公共组件时需要考虑后续接入单元测试可测试，即保证输入输出可预测、可控制
-
异步函数处理必须写
try catch包裹，避免直接让程序崩溃 -
尽量多提取公共方法和公共组件(书写传参方法都由父组件控制[特殊业务组件除外])，单个文件代码行数控制在500行左右
-
组件，组件参数，变量，方法，关键步骤，必须添加注释
-
注释统一用'/* */'
/* Modal header */ .modal-header { ... } /* * Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ } /** * 过滤浮点数，隐藏末尾为0的小数位 * @param {string} num 要过滤的数值 * @param {Number} len 要保留的小数位 */ -
less缩进(2个空格)
.logo { width: 132px; height: 48px; background: url('~assets/images/logo.svg') no-repeat 24px center; } -
每个模块应该有一个单独的less, 然后每个最外层的父类 className 应该写在第一位，所有子Node的样式都写在里面，这样是为了避免命名冲突 ,嵌套最多不超过6层
.layout { height: 100%; min-width: 1280px; position: relative; .header { ..... } .content { .... } } -
类名统一首字母小写驼峰形式
-
避免行内样式，除了覆盖框架样式外，建议都编写样式类
-
css颜色尽量使用十六进制
例：#facd89
-
css属性声明顺序
书写顺序前后为( 目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能 )：
-
定位属性：position display float left top right bottom overflow clear z-index -
自身属性：width height padding border margin background -
文字样式：font-family font-size font-style font-weight font-varient color -
文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow.declarationOrder { display: block; float: right; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; border: 1px solid #e5e5e5; border-radius: 3px; width: 100px; height: 100px; font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; color: #333; background-color: #f5f5f5; opacity: 1; } // 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "font-size-adjust", "font-stretch", "font-effect", "font-emphasize", "font-emphasize-position", "font-emphasize-style", "font-smooth", "line-height", "text-align", "-webkit-text-align-last", "-moz-text-align-last", "-ms-text-align-last", "text-align-last", "vertical-align", "white-space", "text-decoration", "text-emphasis", "text-emphasis-color", "text-emphasis-style", "text-emphasis-position", "text-indent", "-ms-text-justify", "text-justify", "letter-spacing", "word-spacing", "-ms-writing-mode", "text-outline", "text-transform", "text-wrap", "-ms-text-overflow", "text-overflow", "text-overflow-ellipsis", "text-overflow-mode", "-ms-word-wrap", "word-wrap", "-ms-word-break", "word-break" ], [ "color", "background", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "-ms-background-position-x", "background-position-x", "-ms-background-position-y", "background-position-y", "-webkit-background-clip", "-moz-background-clip", "background-clip", "background-origin", "-webkit-background-size", "-moz-background-size", "-o-background-size", "background-size" ], [ "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "opacity", "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", "-ms-filter:\'progid:DXImageTransform.Microsoft.Alpha", "-ms-interpolation-mode", "-webkit-box-shadow", "-moz-box-shadow", "box-shadow", "filter:progid:DXImageTransform.Microsoft.gradient", "-ms-filter:\'progid:DXImageTransform.Microsoft.gradient", "text-shadow" ], [ "-webkit-transition", "-moz-transition", "-ms-transition", "-o-transition", "transition", "-webkit-transition-delay", "-moz-transition-delay", "-ms-transition-delay", "-o-transition-delay", "transition-delay", "-webkit-transition-timing-function", "-moz-transition-timing-function", "-ms-transition-timing-function", "-o-transition-timing-function", "transition-timing-function", "-webkit-transition-duration", "-moz-transition-duration", "-ms-transition-duration", "-o-transition-duration", "transition-duration", "-webkit-transition-property", "-moz-transition-property", "-ms-transition-property", "-o-transition-property", "transition-property", "-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform", "-webkit-transform-origin", "-moz-transform-origin", "-ms-transform-origin", "-o-transform-origin", "transform-origin", "-webkit-animation", "-moz-animation", "-ms-animation", "-o-animation", "animation", "-webkit-animation-name", "-moz-animation-name", "-ms-animation-name", "-o-animation-name", "animation-name", "-webkit-animation-duration", "-moz-animation-duration", "-ms-animation-duration", "-o-animation-duration", "animation-duration", "-webkit-animation-play-state", "-moz-animation-play-state", "-ms-animation-play-state", "-o-animation-play-state", "animation-play-state", "-webkit-animation-timing-function", "-moz-animation-timing-function", "-ms-animation-timing-function", "-o-animation-timing-function", "animation-timing-function", "-webkit-animation-delay", "-moz-animation-delay", "-ms-animation-delay", "-o-animation-delay", "animation-delay", "-webkit-animation-iteration-count", "-moz-animation-iteration-count", "-ms-animation-iteration-count", "-o-animation-iteration-count", "animation-iteration-count", "-webkit-animation-direction", "-moz-animation-direction", "-ms-animation-direction", "-o-animation-direction", "animation-direction" ], [ "content", "quotes", "counter-reset", "counter-increment", "resize", "cursor", "-webkit-user-select", "-moz-user-select", "-ms-user-select", "user-select", "nav-index", "nav-up", "nav-right", "nav-down", "nav-left", "-moz-tab-size", "-o-tab-size", "tab-size", "-webkit-hyphens", "-moz-hyphens", "hyphens", "pointer-events" ] ] 代码提交规范
-
如果是bug，提交信息是：fix(版本号/[需求号:需求点]影响范围/bug号/bug划分): ..........
-
如果是需求、优化，提交信息是:feat(版本号/[需求号:需求点]影响范围): .......... 这样一个可以方便后面图形化分析，一个可以将改动与对应需求做绑定，以后如果要将某一个需求改动一起迁移，可以很快找到对应的改动与bug修复
例： fix(7.3.1.0/[56478:调整菜单栏]菜单栏组件/56478/新功能bug): ...... 如果是历史bug 后面则写历史bug feat(7.3.1.0/[4871:调整菜单栏]菜单栏组件) :........ 4871为研发需求号，如果没有需求，可以自己定义一个号
-
-
