本文参加了SegmentFault思维写作挑战赛，欢迎您加入阅读。作者：JD.COM零售陈燕春

主要介绍一些前端研发的标准化规范，好的代码规范不仅能让代码简洁明了，还能减少bug的发生，更能取悦看代码的人。本文主要从七个方面介绍了命名规范、语法规范、后端系统开发规范、版本更新规范、在线邮件应用规范、项目启动规范、文件目录规范。文件如有错漏，请及时更正和调整。也希望大家能提出更多有价值的意见和建议，让文件更加完善。当然，如果你觉得可以借鉴，欢迎采纳。

介绍

前端标准化是我们前端工程实践的重要组成部分。为什么要标准化？首先，我们的开发需要多人开发，每个开发人员都有自己的编码偏好和习惯。正是因为这种不同的编码习惯和偏好增加了我们项目的维护成本，所以每个项目或团队都需要清晰统一的标准。

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

一.命名规范

好的命名很好理解，以名知意，也就是css可以清楚的看到html的结构，优雅的js命名，你可以看到每个func处理什么，清晰的文件和文件夹命名规范有助于理解项目结构。下面是我们日常积累的一些命名规范。

1.文件夹用短横线(\`xxx-xxx\ `)命名，vue、js、scss等文件用小写加中间破折号(\ ` XXX-XXX \ `)命名。

2.组件开发规范

(1)根节点类必须以' cp-xxx '开头，xxx对应组件名称，组件内部的类命名为cp-xxx，尽量不要使用scoped。

(2)业务组件可以放在当前业务目录的组件文件夹中。导入时用bcp-xxx来区分它们与公共组件，其他规格与公共组件一致。

3.方法名称：小驼峰(xxxXxYy)，

4.组件中的所有“名称”必须使用“Pascal”命名法，组件的名称与“xxx-xxx”相似。

5.路由跳转地址，不要直接写链接地址，用路由链接地址对应的名字跳转。

6.css命名规范：

1)风格：

a)全球风格：应用-*

b)页面样式：pg-* pg-标记(标记是一个模块)

c)组件样式：cp-*

d)风格属性顺序规范：js有好的写作风格，推荐语法写作风格，不推荐语法写作风格。

2)状态：

a)全局样式：显示，hide(全局状态命名要尽量简单，不要有太多前缀)。

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

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

d)禁止限定范围，无论是在全局、页面还是组件中。

7.枚举值定义：全局事件名和本地存储的键值需要分开放在单独的文件中统一管理，避免冲突。

二。语法规范

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

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)如果判断条件成立：

替换

(7)列表搜索

替换

(8)获取对象属性值

替换

(9)添加对象属性

替换

(10)判断输入框不为空

替换

4.使用ES6的箭头功能注意：

(1)函数体中的“this”对象是定义它的对象，而不是使用它的对象。

(2)不能作为构造函数使用。换句话说，您不能使用\`new\ `命令，否则将会引发错误。

(3)不能使用\`arguments\ `对象，它不存在于函数体中。如果要使用，可以使用\`rest\ `参数。(\`rest\ `使用参数查看《ES6标准入门》)。

(4)不能使用\`yield\ `命令，因此箭头函数不能用作\`Generator\ `函数。

(5)除非必要，否则不要在元素上写“style”。

三。后端系统开发规范

以下是后端开发系统的一些开发规范，主要是为了统一整个网站的风格，以达到更好的性能优化。

1.二级菜单，全是面包屑。

2.“重置”按钮总是重置查询条件，并且不查询数据。

3 .输入总是添加占位符。

4.展示表格。如果某些数据不可用，请使用-show。

5.只有当数据至少为1时，才会显示分页。

6.在6.table列表中，isLoading总是添加在接口请求过程中。

7.如果搜索结果为空，请添加一个空白页面。

8.全局加载：(如果需要添加加载，在请求接口时添加isLoading:true)

需要使用的情况：

(1)进入记录数据页面

(2)提交表单

(3)接口是非幂等的。

不需要使用：

(1)打开弹出窗口时，需要请求界面。

(2)接口幂等，响应快，接口响应成功后需要重新加载数据。

9.列表分页的默认大小是20，页面大小是[20，50，100]。如果分页在框内，默认大小为10，页面大小为[10，30，50]。

10.翻页查询，比如翻到第五页点击查询，要从pageNo=1开始。

四。修订号更新规范

版本规范的意义在于让开发人员对这个项目的更新次数和这个更新的日期一目了然，以便开发人员和开发分支快速定位问题，了解项目迭代版本的内容。

X.Y.Z(主要版本号、次要版本号和修订号)

1.版本号必须采用X.Y.Z的格式，其中X、y、z为非负整数，数字前禁止填零。x是主版本号，y是次版本号，z是修订号。每个元素必须增加一个数值。

2.修订号：原页面修改时递增，如添加按钮、修改副本、修复bug等。

3.次要版本号：在添加某些(小)功能模块时递增，比如添加列和页。当次版本号递增时，修订号必须返回到0。

4.主版本号：当功能模块有较大变化时递增，如增加多个功能模块或改变整体架构。当主版本号递增时，次版本号和修订号必须为零。

5.Changelog是倒序写在项目的README.md中的，也就是最新的写在最上面。模板如下所示：

\### 2.0.0

-更新主题：技术人员看板

-更新日期：2022年2月23日

-开发商：xxx

-发展处：dev-20220223-cyc -board

1.为技术人员看板添加新页面。6.Changelog和package.json中的版本号应该同步更新。

五：在线规范：

1.在线时间说明

每周的周二和周四是发布日，这为R&D和产品设定了标准。不用因为“项目紧急”而每天加班熬夜临时推出产品，减轻研发压力。

2.在线邮件应用规范

比如今天上线的项目很多的时候，比如A项目，B项目，C项目等等。如果线上每个人都提交一个审批邮件，领导每天就要审批很多邮件，所以这个时候我们要制定一个标准。

目前网上审批流程是：每周二、周四，需求高的人负责发送当天的网信申请，负责人提前收集网上需求、分支、审核、流程步骤等信息。一起总结发邮件。这时候领导只需要回复一封在线邮件。具体模板如下：

不及物动词项目启动规范

对于新员工和新人来说，项目启动仍然具有挑战性。特别是有些项目需要配置相关的host，package.json文件，一般只是基本启动，不会提示配置host等。这时候我们需要制定一个规范，比如在README.md文件下写具体的启动步骤，以及每个环境下需要配置的主机，如下：

有了上面的启动指导，不管是谁开发，都方便多了。只要按照上面的步骤一步一步来，就不需要最初开发项目的人员去找相关开发人员帮忙启动项目，还附上了登录账号等信息，大大提高了好几倍的人为效果。

七：文件目录规范：

一个项目必须有一个好的目录结构。当我们的项目越来越大或者很多人合作开发时，我们应该有一个清晰的目录结构。一个好的项目目录结构可以给我们带来很多好处，比如：每个功能或模块单独管理，代码的可读性增强，代码的可维护性增强，人与人之间的交流也很容易。接下来，我将分享我在平时项目中总结的目录结构。当然这只是我个人的做法。欢迎大家提出更好的意见。

| -公共

|-index.html(入门级html)

| - src

| -资产(静态资源)

| - css(全局样式)

| - js(全局js)

| -图像(静态图片)

| -组件(基本组件)

| - hocs(业务组件)

| -布局(全局布局)

| | -服务(axios接口包)

| -商店(vuex)

| | -视图/页面(第页)

| - App.vue

| - main.js(入口js)

| | - .编辑器配置

| | - .规范配置

| - .Git ignore(Git(Git仓库忽略的文件或目录)

|-babel.config.js(由babel编译的配置)

| - package.json(项目配置文件)

| - README.md(项目描述)

| - vue.config.js(配置文件)