爲提升團隊協做效率,規範文件管理,方便項目後期維護,提升代碼質量,特制訂此文檔,前端開發人員必須遵守本規範進行前臺頁面開發。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()
全部命名最好使用英語表示。
全部變量名應該明確而必要,儘可能避免沒必要要的容易混淆的縮寫。
netease.events.mouse.Handler,而不是 netease.events.mouse.MouseEventHandler。
對應的方法應該使用對應的動詞,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。
應該避免雙重否認意義的變量,例如:bIsNotError, bIsNotFound,不可取。
變量應該在最小的範圍內定義,並儘量的保持最少的活動時間。
循環變量最好在循環中定義。例如for(var i=0,m=10;i++)
儘可能避免複雜的條件語句,可使用臨時的boolean
變量代替。
必定要避免在條件中執行語句,例如:if((i=3)>2){}
,不可取。
不要在代碼中重複使用相贊成義的數字,用一個變量代替