前端编码习惯养成

养成好（dai）的（ma）习（gui）惯（fan）

HTML

1. 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

2. 为页面添加语言属性

3. 字符编码

4. IE兼容模式

5. 尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

6. 尽量不使用行内样式

7. 属性的顺序：常用的属性靠前例如class，id；boolean类型的属性，不用赋值，放在最后。

CSS

1. 用四个空格来代替制表符（tab）

2. 为选择器分组时，将单独的选择器单独放在一行。

3. 为了代码的易读性，在每个声明块的左花括号前添加一个空格。

4. 声明块的右花括号应当单独成行。

5. 为了获得更准确的错误报告，每条声明都应该独占一行。

6. 所有声明语句都应当以分号结尾。

7. 对于属性值或颜色参数，省略小于1的小数前面的0（例如，.5 代替 0.5；-.5px 代替 -0.5px）。

8. 十六进制值应该全部小写，尽量使用简写的形式，例如，#fff 代替#ffffff。

9. 为选择器中的属性添加双引号，例如，input[type="text"]。

10. 避免为0值指定单位，例如，用margin: 0;代替margin: 0px;。

11. 伪元素使用:的写法，如不需要兼容IE8及IE8以下浏览器，可使用::替换:的写法。例如::before替换:before。

12. 为每个需要控制的元素节点，添加对应的class进行控制，而不是使用元素选择器来进行控制，因为CSS的解释编译是从右往左进行的。

13. 关于命名

    • class名称中只使用小写字符和减号-，—不使用下划线，也使用驼峰命名法—。
    • 文件命名同上
    • 使用有组织的或目的明确的名称，名称应当尽可能短，并且意义明确。例如：
    • 尽量全部用英语命名，不用英语中间参杂拼音，不会的单词可以Google。

14. 使用LESS 或 SCSS 编写的时候不需要带前缀的属性声明，因为在对其进行编译的时候使用gulp-autoprefixer可自动为编译后的CSS加上对应的浏览器前缀。

建议css代码结构

/*单个选择器*/
selector {
    /*...*/
}

/*多个选择器，每个选择器都换行*/
selector1,
selector2,
selector3 {
    /*...*/
}

---

CSS模块化，以及预编译语言的使用（LESS OR SCSS）

1. 定义浏览器统一的默认样式：Normalize.css

2. 布局类通用模块

   1. grid module，网格模块
   2. media module，媒体类数据展示
   3. slide module，轮播模块
   4. list module，列表类模块

3. 工具类模块，例如

   /*清除浮动*/
   .clear-fix {
       *zoom: 1;
   }
   .clear-fix::before,
   .clear-fix::after {
       display: table;
       clear: both;
       content: "";
   }
   .clearfix::after { 
       clear: both; 
   }
   

4. LESS OR SCSS 的使用

   1. 使用构建工具，如gulp来进行编译。

   2. 编写样式的时候无需加浏览器前缀。
      使用gulp-autoprefixer
      browserslist

---

JS

1. 命名

   变量、函数参数：使用Camel（驼峰）命名的方式。

   var isLogin = function(accountId) {
       // do something
   };
   

   常量：使用 全部字母大写，单词间下划线分隔 的命名方式。

   var GLOBAL_CONFIG = {};
   

   函数：使用 Camel命名法。

   function testFunc() {
       // do something
   }
   

   类、构造函数、枚举变量 使用 Pascal（帕斯卡）命名法

   // class
   function TestClass() {
       // do something
   }
   
   // 构造函数
   function TestClass(text) {
       this.text = text;
   }
   
   // 枚举变量：枚举属性全部采用大写加下划线的方式
   var Status = {
       DEFAULT: 0,
       NEW: 1,
       UPDATE: 2,
       READONLY: 3
   };
   

   boolean类型的变量使用 is 或 has 开头

   var isLoaded = true;
   var hasPermission  = false;
   

   jquery对象以$开头

   var $elem = $(selector);
   

2. 注释

   单行注释
   必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

   多行注释 避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

   文档化注释 使用 /**...*/ 形式的块注释中。

   /**
    * 函数描述
    *
    * @param {string} p1 参数1的说明
    * @param {string} p2 参数2的说明，比较长
    *     那就换行了.
    * @param {number=} p3 参数3的说明（可选）
    * @return {Object} 返回值描述
    */
   function foo(p1, p2, p3) {
       var p3 = p3 || 10;
       return {
           p1: p1,
           p2: p2,
           p3: p3
       };
   }
   

---

构建工具的使用