前端标准化之旅

时间:2023-02-20 11:10:15

作者:京东零售 陈艳春

本文主要是介绍前端研发的一些标准化规范,良好的代码规范,不仅能够让代码简洁清晰,还可以减少 bug 的出现,更能够让看代码的人赏心悦目,本文主要从命名规范、语法规范、后端系统开发规范、版本更新规范、上线邮件申请规范、项目启动规范来、文件目录规范七方面介绍,文档内如有错漏之处,敬请大家指正,会及时做出调整;也希望各位能够提出更宝贵意见和建议,使文档更加完善。当然如果感觉有可借鉴之处,欢迎大家采纳。

引言

前端标准化是我们践行前端工程化中重要的一部分,为什么要标准化呢?首先我们开发是需要多人开发的,每一个开发者都有各自的编码喜好和习惯,就是因为这个不同的编码习惯和喜好增加了我们项目的维护成本,所以每个项目或者团队需要明确统一的标准。

以下是我积累的一些前端规范以及一些个人建议:

一.命名规范

好的命名是通俗易懂,见名知意,即看css能很清晰明了的看出html的结构,优雅的js命名,可以看出每个func所处理的事情,清晰的文件和文件夹命名规范,有助于理解项目结构,以下介绍下我们日常积累的一些命名规范。

1.文件夹使用短横杠命名法(`xxx-xxx`),vue、js、scss等文件使用小写加中划线命名法(`xxx-xxx`)

2.组件开发规范

(1)根节点class必须是"cp-xxx"开头,xxx对应的是组件的名称,组件里面的class 以cp-xxx形式命名class,尽量不要使用scoped。

(2)业务组件可以放在当前业务目录的component文件夹,import导入时用bcp-xxx开头已和公共组件加以区分,其他规范和公共组件保持一致。

3. 方法命名:小写+驼峰(xxxXxYy),

4. 组件里面的`name`都必须使用`Pascal`命名法,组件使用名称类似`xxx-xxx`这样。

5. 路由跳转地址,不要直接写死链接地址,使用路由链接地址对应的name进行跳转。

6. css命名规范:

1)样式:

a) 全局样式:app-*

b) 页面样式:pg-* pg-marking(marking是模块)

c) 组件样式:cp-*

d) 样式属性顺序规范:js有好的写法,推荐语法写法和不推荐语法写法

2)状态:

a) 全局样式:.show, .hide(全局状态命名尽量简单,不要有过多前缀)

b) 页面样式:pg-*_active(页面样式尽量只能在当前页面使用,必须添加前缀)

c) 组件样式:cp-*_active(组件样式尽量只能在当前组件使用,必须添加前缀)

d) 禁止使用scoped,无论是在全局、页面还是组件内

7.枚举值定义:全局事件名、本地存储的key值等需要抽离出单独的文件进行统一管理, 避免冲突。

二.语法规范

语法规范是为了提高工作效率,兼容性优良,页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。

1. 根据当前eslint的规范编写代码。

2. 尽可能的少用可变变量,能用const的就不要使用let,完全不使用var。

3. 拥抱ES6:(举一些例子,顺带学习回顾下)

(1)赋值简写:`{ data: data }`可以写成`{ data }`

(2)函数简写:`{data: function () {}}`可以写成`{data () {}}`

(3)对象取值:const {a,b,c,d,e} = obj || {}

(4)合并数据:

前端标准化之旅