作者：京东批发 陈艳春
本文次要是介绍前端研发的一些标准化标准，良好的代码标准，不仅可能让代码简洁清晰，还能够缩小 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）合并数据：
代替
（5）拼接字符串：
代替
（6）if 判断条件合集：
代替
（7）列表搜寻
代替
（8）获取对象属性值
代替
（9）增加对象属性
代替
（10）输入框非空判断
代替
4. 应用 ES6 的箭头函数须要留神：
（1） 函数体内的 \`this\` 对象就是定义时所在的对象，而不是应用时所在的对象。
（2）不能够当做构造函数。也就是说，不能够应用 \`new\` 命令，否则会抛出一个谬误。
（3）不能够应用 \`arguments\` 对象，该对象在函数体内不存在。如果要用，能够应用 \`rest\` 参数代替。（\`rest\` 参数应用自行查看《ES6 规范入门》）。
（4）不能够应用 \`yield\` 命令，因而箭头函数不能用作 \`Generator\` 函数。
（5）非必要状况，不要再元素上写 \`style\`。
三．后盾零碎开发标准
以下次要是针对后端开发零碎的一些开发标准，次要是将整个网站对立格调，以达到更好的性能优化。
1. 二级菜单，一律加上面包屑
2.“重置”按钮 一律是重置查问条件，不进行数据查问
3.input 一律加上 placeholder
4. 展现的 table，有些数据没有的话，要应用 – 展现
5. 数据至多大于等于 1 条时，才会显示分页
6.table 列表外面，在接口申请过程中一律加上 isLoading
7. 搜寻后果为空，要加上空页面
8. 全局 loading：（须要加 loading 就在申请接口时，加上 isLoading:true）
须要应用的状况：
（1）进入页面记录数据
（2）提交表单
（3）接口是非幂等性的状况。
不须要应用的状况：
（1）关上弹窗时须要申请接口的
（2）接口是幂等性、响应快，且接口胜利响应后要从新加载数据的状况
9. 列表分页默认 size:20，pageSizes:[20,50,100]，若是弹框内分页，默认 size:10，pageSizes:[10,30,50]
10. 翻页查问，比方说翻到第五页，点击查问，应该从 pageNo = 1 开始
四．版本号更新标准
版本标准的意义，是让开发者一眼查看到本我的项目的更新次数，以及本次更新的日期，开发人员，开发分支，可能疾速的定位问题，理解我的项目迭代版本的内容。
X.Y.Z（主版本号. 次版本号. 订正号）
1. 版本号必须采纳 X.Y.Z 的格局，其中 X、Y、Z 为非负的整数，且禁止在数字后方补零。X 是主版本号、Y 是次版本号、Z 为订正号。每个元素必须以数值来递增。
2. 订正号：当波及原有页面批改，比方新增按钮、批改文案、bug 修复时递增.
3. 次版本号：当波及新增肯定（大量）功能模块，比方新增栏目、新增页面时递增。次版本号递增时，订正号必须归 0。
4. 主版本号：当波及功能模块有较大的变动，比方减少多个功能模块或是整体架构发生变化时递增。主版本号递增时，次版本号和订正号必须归 0。
5. Changelog 写在我的项目的 README.md 里，采纳倒序排列，即最新的写在最上边，模板如下：
\### 2.0.0
– 更新主题：技师看板
– 更新工夫：2022-02-23
– 开发人员：xxx
– 开发分支：dev-20220223-cyc -board
1、减少技师看板新页面
6. Changelog 和 package.json 里的版本号要同步更新
五：上线标准：
1. 上线工夫标准
每周的周二和周四为上线日, 这样就为研发和产品制订了一个标准，不必思考每天加班熬夜上线，防止产品因“我的项目紧急”的原因让研发长期上线，从而缩小研发的压力。
2. 上线邮件申请标准
比方明天上线有 A 我的项目、B 我的项目、C 我的项目等等多个我的项目的时候，如果每个人上线的同学提交一个审批邮件，对于领导来说须要每天审批很多邮件，所以此时咱们不得不制订一个规范。
目前的上线审批流程为：每周二和周四需要大的人负责发送当天的上线邮件申请，负责人提前收集好上线的需要，分支，review 人，流程步骤等信息。汇总一起发送邮件，此时领导只须要回复一个上线邮件即可。具体模版，如下：
六．我的项目启动标准
我的项目启动对于新入职员工，以及新人还是有肯定的挑战的，特地是一些我的项目须要配置相干的 host，package.json 文件外面个别只是根底的启动，不会提醒配置 host 等，此时就须要咱们制订一个标准，比方在 README.md 文件下写上具体的启动步骤，以及每个环境须要配置的 host，具体如下：
有了以上的启动疏导是不是不论谁开发都不便了很多，只有依照下面的步骤一步一步的进行，就不须要首次开发该项目标人员去找相干开发帮忙启动我的项目，并且也附加了登录账号等信息，大大提高人效数倍。
七：文件目录标准：
一个我的项目, 有一个好的目录构造那是必不可少的。当咱们我的项目越来越大时或者多人合作开发时, 咱们就更应该有一个清晰的目录构造。好的我的项目目录构造可能给咱们带来诸多的益处, 比方: 每个性能或模块独自治理、代码的可读性加强、代码的可维护性加强、易于多人合作之间的沟通、接下来我将分享一下我在平时我的项目中总结的目录构造, 当然这只是我集体的实际, 欢送大家提出更好的意见。
|—public
|—index.html（入口 html）
|—src
|—assets（动态资源）
|—css（全局款式）
|—js（全局 js）
|—images（动态图片）
|—components（根底组件）
|—hocs（业务组件）
|—layout（全局布局）
|—service（axios 接口封装）
|—store（vuex）
|—views/pages（页面）
|—App.vue
|—main.js（入口 js）
|—.editorconfig（编辑器配置）
|—.eslintrc（代码标准的配置）
|—.gitignore（Git 仓库疏忽掉的文件或目录）
|—babel.config.js（babel 编译的配置）
|—package.json（我的项目配置文件）
|—README.md（我的项目形容）
|—vue.config.js（配置文件）