前端开发规范个人汇总
2018-11-05 本文已影响20人
cs0710
前端开发规范（参考）
目标：就是获得代码的一致性和降低代码维护成本，提高团队多人协作的开发效率。
—: 代表需要多关注
| 实践点 | 不推荐 | 推荐 |
|---|---|---|
| --代码缩进 | tab和空格混搭 | tab缩进 |
| 属性名或者cssHex颜色值 | 标签属性名大写或者Hex的颜色大写 | 一律小写 |
| --省略协议资源的URl协议 | url或者src上添加http或者https协议 | 去掉，改为相对地址，避免安全问题引起的浏览器拦截，减少文件字节数 |
| 注释 | 单行注释、多行注释、方法注释（注意注释符与描述之间的单个空格） | |
| --自闭合标签 | <input></input>等 |
img input br hr无需闭合，页面中尽量减少标签的个数。但是不要在自动闭合标签结尾处使用斜线，H5规范指出他们是可选的 |
| —class与Id命名 | 随意命名 | 尽可能语义化，字母小写，多个单词组成时，采用中划线-分隔 |
| 引号的使用 | 全部使用单引号或者全部双引号 | 对属性的定义统一使用双引号 |
| —变量命名 | 驼峰命名，私有变量使用_开头 | |
| —常量命名 | 全部大写，多个单词中间用_分隔 | |
| —类方法、枚举变量命名 | 使用 Pascal命名，大驼峰，首字母需大写 | |
| 文件名命名 | 建议小写，多个单词使用-分隔 | |
| —严格比较=== | 不推荐使用== | 避免在转换的过程中，因类型而引起副作用（如调用其方法） |
| —默认参数 | 没有对数据进行兼容 | 对结果数据务必进行数据兼容，避免数据流转异常，页面报红 |
| 条件判断 | 简单的if/else | 使用三元运算符，增加代码可读性 |
| —--异常流程判断---- | 不处理，增加接口访问次数 | 根据后端返回的结果进行成功与否，进行拦截，提高页面性能，优化请求次数（重要） |
| 避免全局变量污染 | var | 根据ES6特性进行变量声明 |
| 代码逻辑添加注释 | 一般js文件编码行数不要超过250行 | |
| 搭配eslint/csslint | 进行代码检查，减少文件代码warning | |
| —绑定上下文 | es5写法手动绑定 | es6的箭头函数 |
| —异步流程处理 | 回调或者Promise的then函数 | async/await，类似处理同步，可读性强 |
