前端编码习惯养成

2016-06-14  本文已影响0人  huange

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

HTML

  1. 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
  1. 为页面添加语言属性
<!DOCTYPE html>
<html lang="zh-CN">
    <!-- ... -->
</html>
  1. 字符编码
    <meta charset="UTF-8">
  1. IE兼容模式
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

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

  2. 尽量不使用行内样式

  3. 属性的顺序：常用的属性靠前例如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
    };
}

构建工具的使用

上一篇下一篇

猜你喜欢

热点阅读