作者：天猫零售业 陈艳春
责任编辑主要就是如是说后端研制的许多技术标准规范化，良好的标识符规范化，不仅能让标识符简约明晰，还能减少 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）列表搜索
代替
代替
（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工程项目等等多个工程项目的时候，如果每一人上架的同学提交一个审批电子邮件，对于领导来说须要每天审批很多电子邮件，所以此时他们不得不制定一个标准。
目前的上架审批流程为
六．工程项目开启规范化
工程项目开启对于新入职员工，以及新人还是有一定的挑战的，特别是许多工程项目须要配置相关的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（配置文档）
总结：
本篇文章以我所了解的规范化为例，阐述了后端的许多技术标准规范化，希望能给其他后端小伙伴或者其他后端项目组提供参考。
由于个人水平有限，文章中的诸多论述难免会有瑕疵，希望我们多提意见提议。
