JavaScript之編碼規(guī)范 推薦
更新時(shí)間:2012年05月23日 23:40:57 作者:
JavaScript是一種語法靈活,簡單易懂的腳本語言。正因?yàn)殪`活,因此很多人在編寫代碼時(shí),顯得很隨意,這就導(dǎo)致后期的修改、擴(kuò)展和維護(hù)變得異常困難。遵循統(tǒng)一的編碼規(guī)范,不僅對C++和Java這種編譯型語言很重要,對JavaScript腳本語言也同樣如此
一、命名
1、應(yīng)給變量和函數(shù)取一個(gè)含義確切的名稱,不要隨意命名。
2、非構(gòu)造函數(shù)采用駝峰命名法,盡量采用動(dòng)賓結(jié)構(gòu),以與變量名相區(qū)別,如getName或IsFull。構(gòu)造函數(shù)(即自定義類型)名稱首字母大寫,以與非構(gòu)造函數(shù)相區(qū)別,如Person。
3、變量采用駝峰命名法。由于JavaScript是一種弱類型語言,因此建議在變量名稱前加前綴:整形(i),浮點(diǎn)數(shù)(f),布爾型(b),字符串(s),數(shù)組(a)。但不強(qiáng)制這么做,可根據(jù)個(gè)人愛好選擇,選擇好后就不要混用加前綴和不加前綴這兩種方式了。
二、布局
1、空格。
a)var與變量名之間留一個(gè)空格,變量名與等號之間留一個(gè)空格,等號與初始值之間留一個(gè)空格,初始值與分號之間不留空格。如:var i = 10;
b)使用字面量方式聲明引用類型變量時(shí),各個(gè)屬性與冒號之間不留空格,冒號與初始值之間留一個(gè)空格。如:
var Person = {
age: 16,
name: "Sam"
};
c)function與函數(shù)名之間留一個(gè)空格,函數(shù)名與()之間不留空格,()與{之間留一個(gè)空格。
d)函數(shù)的各個(gè)參數(shù)之間留一個(gè)空格。
e)if、while、for與左括號之間留一個(gè)空格,以強(qiáng)調(diào)關(guān)鍵字;switch、with與左括號之間不留空格。
f) 二元操作符與左右兩個(gè)操作數(shù)之間留一個(gè)空格。當(dāng)某行代碼較長時(shí),也可不留空格。
2、換行。
a)每行語句占用一行,不要多個(gè)語句一行。
b)if、while、for等塊級作用域后的大括號{不要另起一行,就放在關(guān)鍵字同一行。
3、縮進(jìn)。
a)縮進(jìn)使用4個(gè)空格,不要使用tab。
b)作用域不一樣時(shí)就應(yīng)當(dāng)進(jìn)行縮進(jìn),以顯示出其層次關(guān)系。
三、注釋
1、合理添加注釋。注釋不能完全沒有,也不是越多越好。給重要的方法、變量和算法(或其他需要注意的問題)添加注釋即可。
2、修改源代碼時(shí),需要同步修改注釋,保持兩者的一致。
3、不要在代碼中使用html方式的注釋。
四、規(guī)范
1、申明變量時(shí)必須加var關(guān)鍵字。雖然JavaScript允許不加var關(guān)鍵字,此時(shí)成為全局變量,但這是導(dǎo)致問題的一個(gè)來源。
2、申明變量時(shí)必須同時(shí)進(jìn)行初始化,之后最好不要再改變變量的數(shù)據(jù)類型了。
3、語句末尾可以加分號的,必須加分號。
4、if、while、for等僅有一條語句時(shí),也需要放在大括號內(nèi)。
5、不要隨意使用全局變量,如果不得不使用,最好只用一個(gè)全局變量。
6、JavaScript與html、css之間應(yīng)保持松散耦合。html是數(shù)據(jù)層,css是表現(xiàn)層,JavaScript是行為層,三者應(yīng)避免緊密的耦合,否則會導(dǎo)致后期難以維護(hù)。html中不要有具體的JavaScript代碼,全部采用包含外部文件的方式;JavaScript中也盡量不要使用innerHTML等插入大量html元素,應(yīng)考慮將元素放在html中,只不過初始隱藏即可;JavaScript中不要直接修改css中的具體屬性,而應(yīng)通過className來間接修改。
7、不要修改不是由你所有的對象,不給其實(shí)例或原型添加屬性或方法,也不要重復(fù)定義其已有的方法。否則,當(dāng)該對象的新版本添加了同名的屬性或方法時(shí),會導(dǎo)致潛在的難以察覺的問題。解決方案有兩種:一是繼承,二是包含。
8、使用命名空間來防止多個(gè)庫之間的沖突,可參考YUI庫的組織方式。
9、對于代碼中出現(xiàn)的字面量,應(yīng)將其放在某個(gè)變量的屬性中,屬性名首字母或所有字母大寫(模擬其他語言中的define或enum)。如:
var Color = {
RED: 1,
BLUE: 2,
GREEN: 3
};
10、對函數(shù)中傳入的參數(shù)進(jìn)行檢查。若為基本類型,使用typeof;若為引用類型,使用instanceOf;若要檢查某個(gè)對象是否包含某個(gè)方法,則對該方法使用typeof操作符,并與字符串"undefined"比較。
五、性能
1、避免全局查找。使用全局變量和函數(shù)的開銷要比使用局部變量和函數(shù)大,因?yàn)槿肿兞亢秃瘮?shù)涉及到作用域鏈的查找。因此,當(dāng)函數(shù)中多次使用全局變量時(shí),就會進(jìn)行多次作用域鏈的查找,為了避免這個(gè)問題,可以將多次使用的全局變量賦值給一個(gè)局部變量,以后都使用該局部變量。
2、避免使用witch語句。with語句會創(chuàng)建自己的作用域,從而導(dǎo)致額外的開銷。
3、避免屬性查找。屬性查找是一個(gè)O(n)操作,對象上的任何屬性查找都比訪問變量和數(shù)組花費(fèi)更多時(shí)間(訪問變量和數(shù)組是O(1)操作)。因此,如果多次用到同一個(gè)屬性,則應(yīng)將其保存在局部變量中。如:
var sUrl = window.location.href;
var sData = sUrl.substring(sUrl.indexOf("?"));
1、應(yīng)給變量和函數(shù)取一個(gè)含義確切的名稱,不要隨意命名。
2、非構(gòu)造函數(shù)采用駝峰命名法,盡量采用動(dòng)賓結(jié)構(gòu),以與變量名相區(qū)別,如getName或IsFull。構(gòu)造函數(shù)(即自定義類型)名稱首字母大寫,以與非構(gòu)造函數(shù)相區(qū)別,如Person。
3、變量采用駝峰命名法。由于JavaScript是一種弱類型語言,因此建議在變量名稱前加前綴:整形(i),浮點(diǎn)數(shù)(f),布爾型(b),字符串(s),數(shù)組(a)。但不強(qiáng)制這么做,可根據(jù)個(gè)人愛好選擇,選擇好后就不要混用加前綴和不加前綴這兩種方式了。
二、布局
1、空格。
a)var與變量名之間留一個(gè)空格,變量名與等號之間留一個(gè)空格,等號與初始值之間留一個(gè)空格,初始值與分號之間不留空格。如:var i = 10;
b)使用字面量方式聲明引用類型變量時(shí),各個(gè)屬性與冒號之間不留空格,冒號與初始值之間留一個(gè)空格。如:
復(fù)制代碼 代碼如下:
var Person = {
age: 16,
name: "Sam"
};
c)function與函數(shù)名之間留一個(gè)空格,函數(shù)名與()之間不留空格,()與{之間留一個(gè)空格。
d)函數(shù)的各個(gè)參數(shù)之間留一個(gè)空格。
e)if、while、for與左括號之間留一個(gè)空格,以強(qiáng)調(diào)關(guān)鍵字;switch、with與左括號之間不留空格。
f) 二元操作符與左右兩個(gè)操作數(shù)之間留一個(gè)空格。當(dāng)某行代碼較長時(shí),也可不留空格。
2、換行。
a)每行語句占用一行,不要多個(gè)語句一行。
b)if、while、for等塊級作用域后的大括號{不要另起一行,就放在關(guān)鍵字同一行。
3、縮進(jìn)。
a)縮進(jìn)使用4個(gè)空格,不要使用tab。
b)作用域不一樣時(shí)就應(yīng)當(dāng)進(jìn)行縮進(jìn),以顯示出其層次關(guān)系。
三、注釋
1、合理添加注釋。注釋不能完全沒有,也不是越多越好。給重要的方法、變量和算法(或其他需要注意的問題)添加注釋即可。
2、修改源代碼時(shí),需要同步修改注釋,保持兩者的一致。
3、不要在代碼中使用html方式的注釋。
四、規(guī)范
1、申明變量時(shí)必須加var關(guān)鍵字。雖然JavaScript允許不加var關(guān)鍵字,此時(shí)成為全局變量,但這是導(dǎo)致問題的一個(gè)來源。
2、申明變量時(shí)必須同時(shí)進(jìn)行初始化,之后最好不要再改變變量的數(shù)據(jù)類型了。
3、語句末尾可以加分號的,必須加分號。
4、if、while、for等僅有一條語句時(shí),也需要放在大括號內(nèi)。
5、不要隨意使用全局變量,如果不得不使用,最好只用一個(gè)全局變量。
6、JavaScript與html、css之間應(yīng)保持松散耦合。html是數(shù)據(jù)層,css是表現(xiàn)層,JavaScript是行為層,三者應(yīng)避免緊密的耦合,否則會導(dǎo)致后期難以維護(hù)。html中不要有具體的JavaScript代碼,全部采用包含外部文件的方式;JavaScript中也盡量不要使用innerHTML等插入大量html元素,應(yīng)考慮將元素放在html中,只不過初始隱藏即可;JavaScript中不要直接修改css中的具體屬性,而應(yīng)通過className來間接修改。
7、不要修改不是由你所有的對象,不給其實(shí)例或原型添加屬性或方法,也不要重復(fù)定義其已有的方法。否則,當(dāng)該對象的新版本添加了同名的屬性或方法時(shí),會導(dǎo)致潛在的難以察覺的問題。解決方案有兩種:一是繼承,二是包含。
8、使用命名空間來防止多個(gè)庫之間的沖突,可參考YUI庫的組織方式。
9、對于代碼中出現(xiàn)的字面量,應(yīng)將其放在某個(gè)變量的屬性中,屬性名首字母或所有字母大寫(模擬其他語言中的define或enum)。如:
復(fù)制代碼 代碼如下:
var Color = {
RED: 1,
BLUE: 2,
GREEN: 3
};
10、對函數(shù)中傳入的參數(shù)進(jìn)行檢查。若為基本類型,使用typeof;若為引用類型,使用instanceOf;若要檢查某個(gè)對象是否包含某個(gè)方法,則對該方法使用typeof操作符,并與字符串"undefined"比較。
五、性能
1、避免全局查找。使用全局變量和函數(shù)的開銷要比使用局部變量和函數(shù)大,因?yàn)槿肿兞亢秃瘮?shù)涉及到作用域鏈的查找。因此,當(dāng)函數(shù)中多次使用全局變量時(shí),就會進(jìn)行多次作用域鏈的查找,為了避免這個(gè)問題,可以將多次使用的全局變量賦值給一個(gè)局部變量,以后都使用該局部變量。
2、避免使用witch語句。with語句會創(chuàng)建自己的作用域,從而導(dǎo)致額外的開銷。
3、避免屬性查找。屬性查找是一個(gè)O(n)操作,對象上的任何屬性查找都比訪問變量和數(shù)組花費(fèi)更多時(shí)間(訪問變量和數(shù)組是O(1)操作)。因此,如果多次用到同一個(gè)屬性,則應(yīng)將其保存在局部變量中。如:
復(fù)制代碼 代碼如下:
var sUrl = window.location.href;
var sData = sUrl.substring(sUrl.indexOf("?"));
相關(guān)文章
JS div勻速移動(dòng)動(dòng)畫與變速移動(dòng)動(dòng)畫代碼實(shí)例
這篇文章主要介紹了JS div勻速移動(dòng)動(dòng)畫與變速移動(dòng)動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03javascript學(xué)習(xí)筆記(十八) 獲得頁面中的元素代碼
javascript學(xué)習(xí)筆記之獲得頁面中的元素代碼,需要的朋友可以參考下2012-06-06javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
這篇文章主要介紹了javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-10-10四種參數(shù)傳遞的形式——URL,超鏈接,js,form表單
本文介紹了四種參數(shù)傳遞的形式,并給出了URL,超鏈接,js,form表單傳參方式,需要的朋友可以參考下2015-07-07JavaScript 學(xué)習(xí)筆記之變量及其作用域
前篇文章我們介紹了學(xué)習(xí)javascript所需要的基礎(chǔ)中的基礎(chǔ)知識,今天我們來更進(jìn)一步,學(xué)習(xí)下javascript變量及其作用域,希望小伙伴們通過本文能夠有所得。2015-01-01javascript事件綁定學(xué)習(xí)要點(diǎn)
這篇文章主要介紹了javascript事件綁定學(xué)習(xí)要點(diǎn),主要包含下面四個(gè)方面1.傳統(tǒng)事件綁定的問題,2.W3C事件處理函數(shù),3.IE事件處理函數(shù),4.事件對象的其他補(bǔ)充,有需要的小伙伴可以參考下2016-03-03