前端编码规范

规范有什么用？

能让每一个人出乎意料的轻松的阅读任意一段代码，并轻易的看懂它们

• 风格高度统一

• 提高可读性，促进团队协作

• 降低维护成本 （减少马良的粗口）

• 有助于写出质量更高、错误更少、更易于维护的程序

原则

无论团队人数多少，代码应该同出一门。

约定

1. Tab缩进==四个空格

2. 每行代码字符数不超过120个

3. 文件使用UTF-8编码

4. 尽可能不写注释，除非很有必要

5. 文件不能留有多余的空格、换行、不必要的注释

6. 代码一定要格式化

命名

1. 项目命名：全部采用小写方式， 以下划线分隔
   例：my_project_name

2. 目录命名：参考项目命名，有复数结构时，要采用复数命名法。
   例：scripts, styles, images, templates

3. 文件命名：全小写，以下划线分隔

   例：image_preview.js
   如过项目是MVC结构，文件命名可以带上当前模块，便于搜索和理解
   app/scripts/controllers/login.controller.js
   app/scripts/services/login.service.js

4. HTML、CSS文件命名参考如上

5. 语义化，准确的表达意图

JS编写规范

1. 变量命名：驼峰命名法，小写字母开头。必须声明

2. 函数命名：驼峰命名法，小写字母开头。规则：动词或动词+名词组合

   let removeSession = function() {}
   let getUser = function() {}
   let isAdmin = function() {}
   let findMessagesByIdentifier = function() {}

3. 类命名：驼峰命名法，首字母大写

4. 每行代码结束必须有分号;

5. 常量用全大写字母，下划线分割，如const HTTP_SUCCESS = 200;

6. 空格，该有的空格的地方按代码格式化的标准

7. 花括号

   例：if (xx) {
          // do something
      }
   标准写法，其他都不规范，不允许if缩写

8. 使用单引号

   let name = '张三';

9. 使用三目等，用===, !==代替==, !=；

10. 严格模式，在js文件头部声明

    'use strict';
    

11. 一个function超过100行就必须要重构，10行内是比较理想的

12. 一个文件只干一件事，文件行数不超过200行，否则说明模块化程度不够

13. 去除else

    例 if (xxx) {
           return;
       }
       // do something
       
    例 if (xxx) {
           // do something
           return;
       }
       if (xxx) {
           // do something
           return;
       }
       // do something
      

14. 函数参数不能超过3个，可使用对象代替

15. 一个值在代码上出现2次以上就需要提取为常量，防止散弹式编程

HTML编写规范

1. 属性值必修双引号，禁止使用单引号

2. 样式尽可能写到style文件

参考：https://github.com/fex-team/styleguide/blob/master/html.md

CSS编写规范

参考：https://github.com/fex-team/styleguide/blob/master/css.md

我们需要正规军，没有做到，那就是彻底的土匪军