前端编码规范

Posted 秋水不寒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端编码规范相关的知识,希望对你有一定的参考价值。

以下为小组代码提交时git批注规范,请各位在提交代码时严格遵守,方便大家对工作代码追踪
    

提交git代码批注规范

一、本人直接提交
1、一般,提交代码要求功能任务完成便提交,除有依赖情况可提前提交
2、提交批注格式:
 Dev/Fix/BugFix/Mod-任务序号(wbs中序号)-任务名(wbs中任务名)-状态(百分比,无需百分号,同wbs汇报工作状态)-特殊说明

3、特殊说明情况:
(1)直接开发完成的,无需添加特殊说明
(2)功能开发完成后,内部review或内部联调问题修正,使用Fix标签,说明Fix内容
(3)功能开发完成后,提交测试时的bug修正,使用'测试阶段(FVT/SIT/UAT)+Fix'标签,说明bug内容
(4)功能提测结束后(任意阶段的测试均可)的需求变更调整,Mod调整说明
(5)新增util说明,如有他人util依赖可以提前提交代码,否则请与开发一并提交

4、用例: 
(1)完成开发:
Dev-8.3.4.1-需求计划查看(生成)-100

(2)开发完成,内部review或内部联调问题修正(百分比为该功能中的具体某修正的完成状态):
Fix-8.3.4.1-需求计划查看(生成)-100-明细列表处理循环嵌套过深

(3)测试提出bug后的功能bug修正(百分比为该功能中的具体某bug修正状态):
FVT-Fix-8.3.4.1-需求计划查看(生成)-100-点击查看无效

(4)开发完成后的需求变更导致功能调整(百分比为功能调整的完成百分比):
Mod-8.3.4.1-需求计划查看(生成)-100-某画面按钮功能调整

(5)做某项任务时的新增util,其中百分比为功能的2%固定,标签使用Dev固定:
Dev-8.3.4.1-需求计划查看(生成)-2-新增计划状态枚举类


二、同分支由于代码先后版本导致merge
  1、一般的:
  备注无需更改直接提交
  2、特殊情况:
  代码merge差异大时,SourceTree会列举merge代码内容,git不允许批注信息内容过多
  处理方式:
  删除merge文件说明或代码列举,仅保留如一般情况下的信息
  如:Merge branch 'master' of http://112.35.32.67:8817/scm4-dl/api-plan
  其中 'master'为 分支说明 of 之后为服务器git目录

三、不同分支进行左右merge
   目前代码全在master上进行开发,后续当出现不同分支时,以源向目标merge时
   批注内容参照第二点操作
   


javascript编码规范

书写JavaScript代码时需遵循Airbnb公司的JavaScript编码规范,参考链接: 英文版 | 中文版


JS风格一览表

结构
规则
备注

目录名
短横线命名并全部为小写字母

文件名
短横线命名并全部为小写字母
文件后缀名规则:路由引用的模版文件(.vue)使用 -pagevuex相关模块文件(module/*.js)使用 -module调用后端服务的service文件(service/*.js)使用 -service

类(Class)
首字母大写驼峰

函数
首字母小写驼峰

变量
首字母小写驼峰

常量
首字母大写驼峰(包含_)

Vue编码规范
Vue文件的编码需遵循 Vue官方风格指南
框架规范
所有代码
(Must) 业务相关的常数需使用由大写字母和_组成的常量进行定义和引用
Vue文件
(Must) 事件函数名需要使用 on 前缀
(Must) 控制组件显示/不显示,可用/不可用的变量逻辑必须定义在vue文件的 computed 属性中
(Must) 控制组件显示/不显示的变量后缀名使用 visible,可用/不可用的变量后缀名使用 disabled
(Must) 不允许在vue的函数内调用其他事件处理函数
(Must) 不允许直接修改计算属性中返回的一个属于 module 的对象,对于对象内项目值的变更,需要通过提交 mutation 进行修改。
Service文件
(Must) 为了减少因后端服务接口变化带来的影响,在service文件内需要对后端服务的输入参数和返回值进行变换处理
兼容性
前端页面需支持的浏览器为IE10+和其他现代浏览器。为了减少因兼容性导致的bug和性能,不允许使用ES7+语法。
具体可使用的
ES5语法可参考 ES5兼容性表格。
ES6语法可参考 ES6兼容性表格。
工程内已内置如下工具函数库:
数组、对象、字符串处理函数库 lodash
数据处理函数库 numeral
日期处理函数库 moment
ES5的严格模式下,以下情况下会显式的报错,所以要避免以下写法。
对未定义的变量赋值
操作被设置为不可写,不可配置或不可扩充的属性
删除变量,函数,参数
在对象直接量里重复定义属性
eval做关键字,在eval的字符串里定义变量
覆写arguments
使用arguments.caller和 arguments.callee(匿名函数必须具名才能引用自己)
(function() … ).call( null ); // Exception
使用with
特别注意

禁止扩展原生对象的原型,特别是Object.prototype。
不要在if的条件部分使用赋值表达式,如果确实想要在if条件部分赋值,那么把它括在另一对括号中,如:if ((a = b)) ...
parseInt的第一个参数的第一个字符是0时,该字符串将被基于八进制而不是十进制求值。所以使用parseInt方法时,建议总是提供第二个参数来指明基于十进制求值。
因为javascript遵循二进制浮点数算术标准,所以不能正确地处理十进制的小数,因此在js中 0.1+0.2 不等于 0.3。但js中的整数运算是精确的,所以在需要精确浮点运算的时候,建议可以先乘以10的阶乘,使用整数部分运算,运算完后再除以10的阶乘。

其他建议


使用代替 new Object(),使用[] 代替 new Array();
某些情况下使用||或&&代替if,如 evt = evt || window.event;
不允许在if和while语句的条件部分赋值。如 if(evt=window.event)

   
   https://cn.vuejs.org/v2/style-guide/index.html
 

以上是关于前端编码规范的主要内容,如果未能解决你的问题,请参考以下文章

前端规范汇总(参考)

代码书写规范

十年程序员,总结出来的前端代码书写规范!

Spring boot + mybatis-plus 遇到 数据库字段 创建不规范 大驼峰 下划线 导致前端传参数 后端收不到参数 解决方案

前端规范一(命名规范)

规范alibaba编码规范阅读