前端工程代碼規範（四）——JS

縮進與分號

• 使用soft tab（4個空格）。
• 每條語句結尾都須要有分號。

/* 變量申明 */
var x = 1;

/* 表達式 */
x++;

/* do-while */
do {
    x++;
} while (x < 10);

空格

不須要空格的狀況：

• 對象的屬性名後
• 前綴一元運算符後，後綴一元運算符前
• 函數調用括號前
• 不管是函數聲明仍是函數表達式，'('前不要空格
• 數組的'['後和']'前，對象的'{'後和'}'前，運算符'('後和')'前

// 一元運算符 和 三元運算符
++x;
y++;
z = x ? 1 : 2;

// 對象的屬性
var a = {
    b: 1
};

// 數組
var a = [1, 2];

// 運算符
var a = (1 + 2) * 3;

須要空格的狀況：

• 二元運算符先後（加減乘除等）
• 三元運算符'?:'先後
• 代碼塊'{'前
• 下列關鍵字前：else, while, catch, finally
• 下列關鍵字後：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
• 單行註釋'//'後（若單行註釋和代碼同行，則'//'前也須要）多行註釋'*'後對象的屬性值前
• for循環，分號後留有一個空格，前置條件若是有多個，逗號後留一個空格
• 不管是函數聲明仍是函數表達式，'{'前必定要有空格
• 函數的參數之間

var doSomething = function(a, b, c) {
    // do something
};

//  '('前無空格
doSomething(item);

// 循環
for (i = 0; i < 6; i++) {
    x++;
}

空行

• 變量聲明後（當變量聲明在代碼塊的最後一行時，則無需空行）
• 註釋前（當註釋在代碼塊的第一行時，則無需空行）
• 代碼塊後（在函數調用、數組、對象中則無需空行）
• 文件最後保留一個空行

// 變量申明後，須要空行
var x = 1;

// 當變量申明位於最後一行時，無需空行
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// 須要在此註釋以前空行
a++;

function b() {
    // 當註釋位於代碼塊首行時，無需空行
    return a;
}

// 代碼塊以後須要空行
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

換行

換行的地方，行末必須有','或者運算符。

須要換行的狀況：

• 代碼塊'{'後和'}'前
• 變量賦值後
• 判斷語句中的條件過多過長

不須要換行的狀況：

• 下列關鍵字後：else, catch, finally
• 代碼塊'{'前

var a = {
    b: 1,
    c: 2
};

if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

function test() {
    ...
}

var a,
    foo = 7,
    b, c, bar = 8;
    
// 判斷語句中的條件過多過長
if (boolean1 &&
    boolean2 &&
    boolean3) {
    // do someting
}

註釋

單行註釋

• 雙斜線後，必須跟一個空格；
• 縮進與下一行代碼保持一致；
• 不要寫在代碼行以後。

if (condition) {
    // 縮進與下一行代碼保持一致
    allowed();
}

多行註釋

• 最少三行, '*'後跟一個空格，具體參照右邊的寫法；
• 適合的場景：難於理解的代碼段、可能存在錯誤的代碼段、瀏覽器特殊的HACK代碼、業務邏輯強相關的代碼

/*
 * one space after '*'
 */
var x = 1;

文檔註釋
參考jsdoc，多用於註釋函數與類。

/**
 * @func
 * @desc 一個帶參數的函數
 * @param {string} a - 參數a
 * @param {number} b=1 - 參數b默認值爲1
 * @param {string} c=1 - 參數c有兩種支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 參數d爲一個對象
 * @param {string} d.e - 參數d的e屬性
 * @param {string} d.f - 參數d的f屬性
 * @param {object[]} g - 參數g爲一個對象數組
 * @param {string} g.h - 參數g數組中一項的h屬性
 * @param {string} g.i - 參數g數組中一項的i屬性
 * @param {string} [j] - 參數j是一個可選參數
 */
function foo(a, b, c, d, g, j) {
    ...
}

引號

最外層統一使用單引號。

let y = 'foo';
let z = '<div id="test"></div>';

變量命名

• 標準變量採用駝峯式命名（除了對象的屬性外）
• 'ID'在變量名中全大寫
• 'Android'在變量名中大寫第一個字母
• 'iOS'在變量名中小寫第一個，大寫後兩個字母
• 常量全大寫，用下劃線鏈接
• 構造函數，大寫第一個字母

var thisIsMyName;

var goodID;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

函數

• 不管是函數聲明仍是函數表達式，'('前不要空格，但'{'前必定要有空格；
• 函數調用括號前不須要空格；
• 當即執行函數外必須包一層括號；
• 不要給inline function命名；
• 參數之間用', '分隔，注意逗號後有一個空格；
• 一個函數內，最多3層縮進，專一於實現一件事。

var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

doSomething(item);

// 當即執行函數
(function() {
    return 1;
})();

// inline function
var a = [1, 2, function() {
    ...
}];

// 參數間以', '分割
var doSomething = function(a, b, c) {
    // do something
};

括號

下列關鍵字後必須有大括號（即便代碼塊的內容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。

// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

null

適用場景：

• 初始化一個未來可能被賦值爲對象的變量
• 與已經初始化的變量作比較
• 做爲一個參數爲對象的函數的調用傳參
• 做爲一個返回對象的函數的返回值

不適用場景：

• 不要用null來判斷函數調用時有無傳參
• 不要與未初始化的變量作比較

// not good
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}

// good
var a = null;

if (a === null) {
    ...
}

undefined

永遠不要直接使用undefined進行變量判斷；

使用typeof和字符串'undefined'對變量進行判斷。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

jshint

• 用'===', '!=='代替'==', '!='；
• for-in裏必定要有hasOwnProperty的判斷；
• 不要在內置對象的原型上添加方法，如Array, Date；
• 不要在內層做用域的代碼裏聲明瞭變量，以後卻訪問到了外層做用域的同名變量；
• 變量不要先使用後聲明；
• 不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；
• 不要在同個做用域下聲明同名變量；
• 不要在一些不須要的地方加括號，例：delete(a.b)；
• 不要使用未聲明的變量（全局變量須要加到.jshintrc文件的globals屬性裏面）；
• 不要聲明瞭變量卻不使用；
• debugger不要出如今提交的代碼裏；
• 數組中不要存在空元素；
• 不要在循環內部聲明函數；
• 不要像這樣使用構造函數，例：new function () { ... }, new Object

// not good
if (a == 1) {
    a++;
}

// good
if (a === 1) {
    a++;
}

// good
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // be sure that obj[key] belongs to the object and was not inherited
        console.log(obj[key]);
    }
}

// not good
Array.prototype.count = function(value) {
    return 4;
};

// not good
var x = 1;

function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}

// not good
function test() {
    console.log(x);

    var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete(obj.attr);

// good
delete obj.attr;

// not good
if (a = 10) {
    a++;
}

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

for (var i = 0; i < 10; i++) {
    (function(i) {
        nums[i] = function(j) {
            return i + j;
        };
    }(i));
}

// not good
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

雜項

• 不要混用tab和space，或在一處使用多個tab或space；
• 對上下文this的引用只能使用'_this', 'that', 'self'其中一個來命名；
• 行尾不要有空白字符；
• switch的falling through和no default的狀況必定要有註釋特別說明；
• 不容許有空的代碼塊。

function Person() {
    // not good
    var me = this;

    // good
    var _this = this;

    // good
    var that = this;

    // good
    var self = this;
}

目錄索引

前端工程代碼規範（一）——命名規則與工程約定
前端工程代碼規範（二）——HTML
前端工程代碼規範（三）——CSS, SCSS