開發規範(四)JS規範

概述

爲提升團隊協做效率,規範文件管理,方便項目後期維護,提升代碼質量,特制訂此文檔,前端開發人員必須遵守本規範進行前臺頁面開發。php

基本規範

sublime Text3請安裝jshint插件以檢查JS編寫錯誤;
安裝教程:使用lint進行語法及風格校驗前端

異步加載文件命名jquery

require.ensure([],function(){
    //異步加載內容
},'ensure/業務模塊名_頁面名_異步方法名_1')

引號
最外層統一使用單引號。正則表達式

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

空行
如下幾種狀況須要空行:
變量聲明後(當變量聲明在代碼塊的最後一行時,則無需空行)
註釋前(當註釋在代碼塊的第一行時,則無需空行)
代碼塊後(在函數調用、數組、對象中則無需空行)
文件最後保留一個空行express

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

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

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

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

變量聲明
一個函數做用域中全部的變量聲明儘可能提到函數首部,用一個var聲明,不容許出現兩個連續的var聲明。數組

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函數異步

不管是函數聲明仍是函數表達式,'('前不要空格,但'{'前必定要有空格;
函數調用括號前不須要空格;
當即執行函數外必須包一層括號;
不要給inline function命名;
參數之間用', '分隔,注意逗號後有一個空格ide

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

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

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

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

數組、對象函數

對象屬性名不須要加引號;
對象以縮進的形式書寫,不要寫在一行;
數組、對象最後不要有逗號。ui

// not good
var a = {
    'b': 1
};

var a = {b: 1};

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

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

變量命名規範

標準變量採用駝峯式命名
ID在變量名中全大寫
URL在變量名中全大寫
Android在變量名中大寫第一個字母
iOS在變量名中小寫第一個,大寫後兩個字母
常量全大寫,用下劃線鏈接
構造函數,大寫第一個字母
jquery對象必須以$開頭命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

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

// not good
var body = $('body');

// good
var $body = $('body');

前綴規範

s:表示字符串。例如:sName,sHtml;
n:表示數字。例如:nPage,nTotal;
b:表示邏輯。例如:bChecked,bHasLogin;
a:表示數組。例如:aList,aGroup;
r:表示正則表達式。例如:rDomain,rEmail;
f:表示函數。例如:fGetHtml,fInit;
o:表示以上未涉及到的其餘對象,例如:oButton,oDate;

例外狀況:

1:做用域不大臨時變量能夠簡寫,好比:str,num,bol,obj,fun,arr。
2:循環變量能夠簡寫,好比:i,j,k等。

函數命名規範

統一使用動詞或者動詞[+名詞]形式,例如:fGetVersion(),fSubmitForm(),fInit();涉及返回邏輯值的函數可使用is,has等表示邏輯的詞語代替動詞。

若是有內部函數,使用__f+動詞[+名詞]形式,內部函數必需在函數最後定義。

對象方法實現
對象方法命名使用 f+對象類名+動詞[+名詞]形式;例如 fAddressGetEmail

事件響應函數
某事件響應函數命名方式爲觸發事件對象名+事件名或者模塊名+觸發事件對象名+事件名,例如:fDivClick(),fAddressSubmitButtonClick()

其它注意事項

  1. 全部命名最好使用英語表示。

  2. 全部變量名應該明確而必要,儘可能避免沒必要要的容易混淆的縮寫。

  3. netease.events.mouse.Handler,而不是 netease.events.mouse.MouseEventHandler。

  4. 對應的方法應該使用對應的動詞,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

  5. 應該避免雙重否認意義的變量,例如:bIsNotError, bIsNotFound,不可取。

  6. 變量應該在最小的範圍內定義,並儘量的保持最少的活動時間。

  7. 循環變量最好在循環中定義。例如for(var i=0,m=10;i++)

  8. 儘可能避免複雜的條件語句,可使用臨時的boolean變量代替。

  9. 必定要避免在條件中執行語句,例如:if((i=3)>2){},不可取。

  10. 不要在代碼中重複使用相贊成義的數字,用一個變量代替

相關文章
相關標籤/搜索