本文参与了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入。作者：京东零售陈彦春本文主要介绍前端研发的一些标准化规范。好的代码规范不仅可以让代码简洁明了，还可以减少bug的发生，让阅读代码的人赏心悦目。本文主要对命名规范、语法规范、后端系统开发规范、版本更新规范、在线邮件应用规范、项目启动规范、文件目录规范进行了介绍。文档如有错误或遗漏，请指正并及时调整；希望大家多提宝贵意见和建议，使文档更加完善。当然，如果觉得有值得借鉴的地方，欢迎大家采纳。前端标准化是我们前端工程实践的重要组成部分。为什么要标准化？首先，我们的开发需要多人共同开发。每个开发人员都有自己的编码偏好和习惯。正是因为这种不同的编码习惯和偏好，增加了我们项目的维护成本，所以每个项目或团队都需要一个清晰统一的标准。以下是我积累的一些前端规范和一些个人建议：1.命名约定好的命名通俗易懂，看名字就明白意思，就是看css就可以清楚地看到html的结构，优雅的js命名，可以看到每个func处理的东西，清晰的文件和文件夹命名约定，有助于理解项目结构。下面介绍一些我们日常积累的命名规范。1、文件夹使用短划线命名方式（\`xxx-xxx\`），vue、js、scss等文件使用小写连字符命名方式（\`xxx-xxx\`）2、组件开发规范（1）根节点类必须以“cp-xxx”开头。xxx对应组件的名称。组件中的类以cp-xxx的形式命名。尽量不要使用作用域。(2)业务组件可以放在当前业务目录的组件文件夹下。导入时以bcp-xxx开头，以区别于公共组件。其他规格与公用元件一致。3、方法命名：小写+驼峰命名法（xxxXxYy），4、组件中的\`name\`必须使用\`Pascal\`命名法，组件使用的名称类似于\`xxx-xxx\`.5.路由跳转地址，不要直接写链接地址，使用路由链接地址对应的名称进行跳转。6、CSS命名规范：1）样式：a）全局样式：app-*b）页面样式：pg-*pg-marking（标记为模块）c）组件样式：cp-*d）样式属性顺序规范：js有好的写法，推荐语法写法和不推荐语法写法2）状态：a）全局样式：.show，.hide（全局状态命名尽量简单，前缀不要太多）b）页面样式：pg-*_active(页面样式尽量只能用在当前页面，必须加前缀)c)组件样式：cp-*_active(组件样式只能用在当前组件asd)禁止使用scoped，是否在global，第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.输入总是加占位符4.如果显示的表格没有数据，用-显示5.当有数据至少为1项，将显示分页。6、在表列表中，接口请求过程中会添加isLoading。7.如果搜索结果为空，则应添加一个空页面。8、全局加载：（需要在请求接口的时候加上loading，加上isLoading:true）要用到：（1）进入页面记录数据（2）提交表单（3）接口不是幂等的。不需要使用的情况：（1）打开弹窗时，需要请求接口（2）接口是幂等的，响应速度快，接口响应成功后需要重新加载数据9.列表分页默认大小:20,pageSizes:[20,50,100],如果是弹框分页,默认大小:10,pageSizes:[10,30,50]10.翻页查询,比如翻到第五页，点击query，应该是从pageNo=1开始四。版本号更新规范版本规范的意义在于可以让开发者一目了然的查看本次项目的更新次数，以及本次更新的日期、开发者、开发分支，以便快速定位问题和解决了解项目迭代版本的内容。X.Y.Z(Majorversionnumber.Minorversionnumber.Revisionnumber)1.版本号必须为X.Y.Z格式，其中X、Y、Z为非负整数，数字前禁止补零。X是主版本号，Y是次版本号，Z是修订号。每个元素都必须按值递增。2.Revisionnumber：当涉及对原页面进行修改时递增，如添加按钮、修改文案、修复bug等。3.次版本号：当涉及到增加某个（小）功能模块时，比如增加一个新的栏目，增加一个新的页面时间增量。当minorversionnumber递增时，revisionnumber必须返回0。4.Majorversionnumber：当有涉及功能模块的重大变化时递增，例如增加多个功能模块或改变整体架构。当主版本号增加时，次版本号和修订号必须返回到0。5、Changelog写在项目的README.md中，倒序，即最新的写在最前面，模板如下：\###2.0.0-更新主题：技术员看板-更新时间：2022-02-23-开发者：xxx-开发分支：dev-20220223-cyc-board1，新增技术人员看板页面6.Changelog和package.json中的版本号要同步更新五：上线规范：1.上线时间规范每周二、四为上线日，让研发和产品都有一个标准，不用考虑每天加班熬夜上线，避免因“项目急”而临时推出研发产品，从而减轻研发压力。2.线上邮件申请规范比如今天有项目A、项目B、项目C等多个项目上线，如果每个上线的同学都提交一封批准邮件，则需要领导每次批准多封邮件天，所以这个时候我们就得定个标准。目前线上审批流程如下：每周二、周四由需求量最大的人负责发送当天的线上申请，负责人收集线上需求、分支机构、审核人、流程步骤等信息提前。总结并一起发送电子邮件。此时领导只需要回复一封在线邮件即可。具体模板如下：6.项目启动规范项目启动对于新入职新人来说还是有一定挑战的，尤其是一些项目需要配置相关的hosts，package。我们需要制定一个规范，比如把具体的启动步骤写在README.md文件下，以及各个环境需要配置的hosts，如下：有了上面的启动指导，不管是谁开发的，都多了更方便。只需按照以上步骤一步步进行即可，项目的初次开发者无需再找相关开发者帮忙启动项目，还附上登录账号等信息，大大提高了人力效率数倍。七：文件目录规范：对于一个项目来说，有一个好的目录结构是必不可少的。当我们的项目越来越大或者协作开发的人越来越多的时候，我们应该有一个清晰的目录结构。一个好的项目目录结构可以给我们带来很多好处，比如：每个功能或模块单独管理，增强代码可读性，增强代码可维护性，便于多人之间的交流。分享一下我在平时项目中总结的目录结构。当然，这只是我个人的做法。欢迎提出更好的意见。|---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(配置文件)
