前端開發規范文檔

一、HTML規范:

Javascript代碼應該盡量放在.js格式的文件中,需要調用的時候在頁面中以的形式包含進來。Javascript代碼若不是該頁面專用的,則應盡量避免在頁面中直接編寫Javascript代碼。

3,全局命名空間無法與IIFE:

總是將代碼包裹成一個IIFE(Immediately-Invoked Function Expression),用以創建獨立隔絕的定義域。這一舉措可防止全局命名空間被污染。

IIFE 還可確保代碼不會輕易被其它全局命名空間里的代碼所修改(第三方庫,window 引用,被覆蓋的未定義的關鍵字等等)。

// 不推薦


varx=10,

y=100;

console.log(window.x+' '+window.y);

// 推薦

(function(log, w, undefined){

varx=10,

y=100;

console.log((w.x === undefined) +' '+ (w.y === undefined));

}(window.console.log,window));

無論何時,想要創建一個新的封閉的定義域,那就用IIFE。它不僅避免了干擾,也使得內存在執行完后立即釋放。

所有腳本文件建議都從IIFE 開始。

立即執行的函數表達式的執行括號應該寫在外包括號內。雖然寫在內還是寫在外都是有效的,但寫在內使得整個表達式看起來更像一個整體,因此推薦這么做。

//不推薦

(function(){})();

//推薦

(function(){}());

如果想引用全局變量或者是外層IIFE 的變量,可以通過下列方式傳參:

(function($, w, d){

$(function() {

w.alert(d.querySelectorAll('div').length);

});

}(jQuery, window, document));

4,引號:

統一使用單引號(‘’),不使用雙引號(“”)。這在創建 HTML 字符串非常有好處:

varmsg='This is some HTML

'

;

5,變量生命:

總是使用var 來聲明變量。如不指定 var,變量將被隱式地聲明為全局變量,這將對變量難以控制。如果沒有聲明,變量處于什么定義域就變得不清(可以是在 Document 或 Window 中,也可以很容易地進入本地定義域)。所以,請總是使用 var 來聲明變量。駝峰命名法。

//不推薦

x=10;

y=100;

//推薦

varx=10,

y=100;

6,數組和對象字面量:

用數組和對象字面量來代替數組和對象構造器。數組構造器很容易讓人在它的參數上犯錯。

不推薦

vara1=newArray(x1, x2, x3);

vara2=newArray(x1, x2);

vara3=newArray(x1);

vara4=newArray();

正因如此,如果將代碼傳參從兩個變為一個,那數組很有可能發生意料不到的長度變化。為避免此類怪異狀況,請總是采用更多可讀的數組字面量。

//推薦

vara= [x1, x2, x3];

vara2= [x1, x2];

vara3= [x1];

vara4= [];

對象構造器不會有類似的問題,但是為了可讀性和統一性,我們應該使用對象字面量。

//不推薦

varo=newObject();

varo2=newObject();

o2.a=0;

o2.b=1;

o2.c=2;

o2['strange key'] =3;

//推薦

varo= {};

varo2= {

a:0,

b:1,

c:2,

'strange key':3

};

7,函數聲明:

函數應在調用前進行聲明,內部函數應在var 聲明內部變量的語句之后聲明,可以清晰地表明內部變量和內部函數的作用域。

此外,函數名緊接左括號'('之間,而右括號')'和后面的'{'之間要有個空格,以清楚地顯示函數名以其參數部分,和函數體的開始。若函數為匿名 / 無名函數,則 function 關鍵字和左括號'('之間要留空格,否則可能誤認為該函數的函數名為 function。

varinnerA=1;

functionoutF() {

varinnerA=2;

function_inf() {

alert(‘valueA=’+innerA);

}

_inF();

}

outF();

_inF();

8,語句塊內的函數聲明:

切勿在語句塊內聲明函數,在ECMAScript 5 的嚴格模式下,這是不合法的。函數聲明應該在定義域的頂層。但在語句塊內可將函數申明轉化為函數表達式賦值給變量。

不推薦

if(x) {

functionfoo() {}

}

推薦

if(x) {

varfoo=function() {};

}

9,流程控制:

if、while、for、do語句的執行體總是用"{"和"}"括起來,即使在其結構體內只有一條語句

if(s==100) {

alert('shit!');

}

不要使用switch。switch 在所有的編程語言中都是個非常錯誤的難以控制的語句,建議用 if else 來替換它。

10,操作符:

(1)三元條件判斷(if 的快捷方法)

用三元操作符分配或返回語句。在比較簡單的情況下使用,避免在復雜的情況下使用。沒人愿意用10 行三元操作符把自己的腦子繞暈。

不推薦

if(x ===10) {

return'valid';

}else{

return'invalid';

}

推薦

returnx ===10?'valid':'invalid';

11,注釋:

(1)文件注釋

文件注釋要標明作者、文件版本、創建/修改時間、重大版本修改記錄

函數描述

文件版本、創建或者修改時間、功能、作者

/**

* @file Image.js

* @description 功能詳細描述

*/

2函數或者類等都要添加頭描述

/**

* 簡述

*

* 功能詳細描述

*

* @param? arg1 參數1

* @param? arg2 參數2,默認為0

* @return? 看xxx是否成功

*/

function fooFunction (arg1, arg2) {

}

(2)操作注釋

單行注釋,寫在代碼上面

多行注釋

/*

* 注釋操作說明

*/

for( var i = 0; i < obj.lenght; i++) {

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容