最全的Javascript編碼規(guī)范(推薦)
1.嵌入規(guī)則
Javascript程序應(yīng)該盡量放在.js的文件中,需要調(diào)用的時(shí)候在頁(yè)面中以<script src="filename.js">的形式包含進(jìn)來(lái)。Javascript代碼若不是該頁(yè)面專用的,則應(yīng)盡量避免在頁(yè)面中直接編寫Javascript代碼。
2.對(duì)齊縮進(jìn)與換行
a) 縮進(jìn)
在同一系統(tǒng)中應(yīng)采用同一種縮進(jìn)標(biāo)準(zhǔn),本文提倡縮進(jìn)大小為4個(gè)空格。各編譯器對(duì)Tab鍵所代替的空白大小定義不同。建議在設(shè)置開(kāi)發(fā)環(huán)境時(shí),將編輯器里的Tab快捷鍵重新設(shè)置成4個(gè)空格。多數(shù)編譯器提供了此功能。否則建議按4次空格來(lái)進(jìn)行縮進(jìn)。
b) 換行
在以下位置必須換行:
每個(gè)獨(dú)立語(yǔ)句結(jié)束后;
if、else、catch、finally、while等關(guān)鍵字前;
運(yùn)算符處換行時(shí),運(yùn)算符必須在新行的行首。
對(duì)于因?yàn)閱涡虚L(zhǎng)度超過(guò)限制時(shí)產(chǎn)生的換行,參考行長(zhǎng)度中的策略進(jìn)行分隔。
1).字符串過(guò)長(zhǎng)截?cái)?/strong>
每行代碼應(yīng)小于80個(gè)字符。若代碼較長(zhǎng)應(yīng)盡量換行,換行應(yīng)選擇在操作符和標(biāo)點(diǎn)符號(hào)之后,最好是在分號(hào)“;”或逗號(hào)“,”之后。下一行代碼相對(duì)上一行縮進(jìn)4個(gè)空格。這樣可以有效防止復(fù)制粘貼引起的代碼缺失等錯(cuò)誤并增強(qiáng)可讀性。
按一定長(zhǎng)度截?cái)嘧址⑹褂?運(yùn)算符進(jìn)行連接。分隔字符串盡量按語(yǔ)義進(jìn)行,如不要在一個(gè)完整的名詞中間斷開(kāi)。特別的,對(duì)于HTML片段的拼接,通過(guò)縮進(jìn),保持和HTML相同的結(jié)構(gòu):

也可使用數(shù)組來(lái)進(jìn)行拼接,相對(duì)+運(yùn)算更容易調(diào)整縮進(jìn):

2).三元運(yùn)算符過(guò)長(zhǎng)
三元運(yùn)算符由3部分組成,因此其換行應(yīng)當(dāng)根據(jù)每個(gè)部分的長(zhǎng)度不同,形成3種不同的情況:

不得出現(xiàn)以下情況:

3).過(guò)長(zhǎng)的邏輯條件組合
當(dāng)因?yàn)檩^復(fù)雜的邏輯條件組合導(dǎo)致80個(gè)字符無(wú)法滿足需求時(shí),應(yīng)當(dāng)將每個(gè)條件獨(dú)立一行,邏輯運(yùn)算符放置在行首進(jìn)行分隔,或?qū)⒉糠诌壿嫲催壿嫿M合進(jìn)行分隔。最終將右括號(hào))與左大括號(hào){放在獨(dú)立一行,保證與if內(nèi)語(yǔ)句塊能容易視覺(jué)辨識(shí)。如:

4).過(guò)長(zhǎng)的JSON和數(shù)組
如果對(duì)象屬性較多導(dǎo)致每個(gè)屬性一行占用空間過(guò)大,可以按語(yǔ)義或邏輯進(jìn)行分組的組織,如:

通過(guò)5個(gè)一組的分組,將每一行控制在合理的范圍內(nèi),并且按邏輯進(jìn)行了切分。 對(duì)于項(xiàng)目較多的數(shù)組,也可以采用相同的方法,如:


5).return語(yǔ)句
return如果用表達(dá)式的執(zhí)行作為返回值,請(qǐng)把表達(dá)式和 return 放在同一行中,以免換行符被誤解析為語(yǔ)句的結(jié)束而引起返回錯(cuò)誤。return 關(guān)鍵字后若沒(méi)有返回表達(dá)式,則返回 undefined。構(gòu)造器的默認(rèn)返回值為 this。
示例:
3.命名
命名的方法通常有以下幾類:
a).命名法說(shuō)明
1).camel命名法,形如thisIsAnApple
2).pascal命名法,形如ThisIsAnApple
3).下劃線命名法,形如this_is_an_apple ·
4).中劃線命名法,形如this-is-an-apple
根據(jù)不同類型的內(nèi)容,必須嚴(yán)格采用如下的命名法:
b).變量名:必須使用camel命名法
c).參數(shù)名:必須使用camel命名法
d).函數(shù)名:必須使用camel命名法
e).方法/屬性:必須使用camel命名法
f).私有(保護(hù))成員:必須以下劃線_開(kāi)頭
g).常量名:必須使用全部大寫的下劃線命名法,如IS_DEBUG_ENABLED
h).類名:必須使用pascal命名法
i).枚舉名:必須使用pascal命名法
j).枚舉的屬性:必須使用全部大寫的下劃線命名法
k).命名空間:必須使用camel命名法
l).語(yǔ)義:命名同時(shí)還需要關(guān)注語(yǔ)義,如:
變量名應(yīng)當(dāng)使用名詞;
boolean類型的應(yīng)當(dāng)使用is、has等起頭,表示其類型;·
函數(shù)名應(yīng)當(dāng)用動(dòng)賓短語(yǔ);
類名應(yīng)當(dāng)用名詞。
4.注釋
注釋要盡量簡(jiǎn)單,清晰明了。著重注釋的意思,對(duì)不太直觀的部分進(jìn)行注解:

(當(dāng)然這種直接定義一堆全局變量的做法不推薦)
此外,JavaScript 的注釋有兩種"http://" 和"/* .... */",建議"http://"用作代碼行注釋,"/* .... */"形式用作對(duì)整個(gè)代碼段的注銷,或較正式的聲明中,如函數(shù)參數(shù)、功能、文件功能等的描述中:

另:復(fù)制粘貼應(yīng)注意注釋是否與代碼對(duì)應(yīng)。
5.聲明
1).變量的聲明
盡管 JavaScript 語(yǔ)言并不要求在變量使用前先對(duì)變量進(jìn)行聲明。但我們還是應(yīng)該養(yǎng)成這個(gè)好習(xí)慣。這樣可以比較容易的檢測(cè)出那些未經(jīng)聲明的變量,避免其變?yōu)殡[藏的全局變量,造成隱患。
在函數(shù)的開(kāi)始應(yīng)先用 var 關(guān)鍵字聲明函數(shù)中要使用的局部變量,注釋變量的功能及代表的含義,且應(yīng)以字母順序排序。每個(gè)變量單獨(dú)占一行,以便添加注釋。這是因?yàn)?JavaScript 中只有函數(shù)的 {} 表明作用域,用 var 關(guān)鍵字聲明的局部變量只在函數(shù)內(nèi)有效,而未經(jīng) var 聲明的變量則被視為全局變量。示例:

用 var 聲明過(guò)的變量 valueA 和沒(méi)有聲明的變量 valueB 是有區(qū)別的。特別需要注意的是,在函數(shù)內(nèi)部用 var 聲明的變量為局部變量,這樣可以有效地避免因局部變量和全局變量同名而產(chǎn)生的錯(cuò)誤。
2).函數(shù)的聲明
函數(shù)也應(yīng)在調(diào)用前進(jìn)行聲明,內(nèi)部函數(shù)應(yīng)在 var 聲明內(nèi)部變量的語(yǔ)句之后聲明,可以清晰地表明內(nèi)部變量和內(nèi)部函數(shù)的作用域。
此外,函數(shù)名緊接左括號(hào)'('之間,而右括號(hào)')'和后面的'{'之間要有個(gè)空格,以清楚地顯示函數(shù)名以其參數(shù)部分,和函數(shù)體的開(kāi)始。若函數(shù)為匿名 / 無(wú)名函數(shù),則 function 關(guān)鍵字和左括號(hào)'('之間要留空格,否則可能誤認(rèn)為該函數(shù)的函數(shù)名為 function。
內(nèi)部函數(shù)聲明示例:

從上例的輸出可以看出,inF() 函數(shù)僅在 outF() 函數(shù)的內(nèi)部生效,局部變量 innerA 對(duì)內(nèi)部函數(shù)的作用域生效。這樣的編碼方式使得變量和函數(shù)的作用域變得清晰。
相關(guān)文章
關(guān)于B/S判斷瀏覽器斷開(kāi)的問(wèn)題討論
前臺(tái)頁(yè)面五分鐘,自己刷新一次,所以最多只有五分鐘的差錯(cuò)。2008-10-10
js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
用javascript實(shí)現(xiàn)的漢字簡(jiǎn)繁轉(zhuǎn)換
用javascript實(shí)現(xiàn)的漢字簡(jiǎn)繁轉(zhuǎn)換...2007-06-06
js parseInt("08")未指定進(jìn)位制問(wèn)題
今天在做JS關(guān)于月份的判斷,對(duì)于parseInt("01")到parseInt("07");都能得到正確的結(jié)果,但如果是parseInt("08")或parseInt("09")則返回0,首先看parseInt語(yǔ)法:parseInt(string, radix);2010-06-06
javascript驗(yàn)證完全方法具體實(shí)現(xiàn)
下面這段代碼完全實(shí)現(xiàn)了判斷是否合格.傳入號(hào)碼就行了,包括了算法,下面的是用Ext實(shí)現(xiàn)的,但是基于javascript的語(yǔ)法居多,基本都可以用2013-11-11
文本框只能輸入數(shù)字的js代碼(含小數(shù)點(diǎn))
下面小編就為大家?guī)?lái)一篇文本框只能輸入數(shù)字的js代碼(含小數(shù)點(diǎn))。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
Promise+async+Generator的實(shí)現(xiàn)原理
這篇文章主要介紹了Promise+async+Generator的實(shí)現(xiàn)原理,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對(duì)比)
很多時(shí)候需要用到限制文本框的數(shù)字輸入,試過(guò)許多方法,都不太理想,遂決定自己實(shí)現(xiàn)一個(gè)來(lái)玩玩,接下來(lái)介紹曾經(jīng)使用過(guò)的方法與自定義方法的對(duì)比,感興趣的朋友可以了解下啊2013-01-01

