前端開發(fā)規(guī)范文檔

一、HTML規(guī)范:

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

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

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

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));

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

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

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

//不推薦

(function(){})();

//推薦

(function(){}());

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

(function($, w, d){

$(function() {

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

});

}(jQuery, window, document));

4,引號:

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

varmsg='This is some HTML

'

;

5,變量生命:

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

//不推薦

x=10;

y=100;

//推薦

varx=10,

y=100;

6,數(shù)組和對象字面量:

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

不推薦

vara1=newArray(x1, x2, x3);

vara2=newArray(x1, x2);

vara3=newArray(x1);

vara4=newArray();

正因如此,如果將代碼傳參從兩個變?yōu)橐粋€,那數(shù)組很有可能發(fā)生意料不到的長度變化。為避免此類怪異狀況,請總是采用更多可讀的數(shù)組字面量。

//推薦

vara= [x1, x2, x3];

vara2= [x1, x2];

vara3= [x1];

vara4= [];

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

//不推薦

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,函數(shù)聲明:

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

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

varinnerA=1;

functionoutF() {

varinnerA=2;

function_inf() {

alert(‘valueA=’+innerA);

}

_inF();

}

outF();

_inF();

8,語句塊內(nèi)的函數(shù)聲明:

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

不推薦

if(x) {

functionfoo() {}

}

推薦

if(x) {

varfoo=function() {};

}

9,流程控制:

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

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)文件注釋

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

函數(shù)描述

文件版本、創(chuàng)建或者修改時間、功能、作者

/**

* @file Image.js

* @description 功能詳細描述

*/

2函數(shù)或者類等都要添加頭描述

/**

* 簡述

*

* 功能詳細描述

*

* @param? arg1 參數(shù)1

* @param? arg2 參數(shù)2,默認為0

* @return? 看xxx是否成功

*/

function fooFunction (arg1, arg2) {

}

(2)操作注釋

單行注釋,寫在代碼上面

多行注釋

/*

* 注釋操作說明

*/

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

}

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內(nèi)容