DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript之編碼規范 推薦
JavaScript之編碼規范 推薦
編輯:JavaScript基礎知識     
一、命名
1、應給變量和函數取一個含義確切的名稱,不要隨意命名。
2、非構造函數采用駝峰命名法,盡量采用動賓結構,以與變量名相區別,如getName或IsFull。構造函數(即自定義類型)名稱首字母大寫,以與非構造函數相區別,如Person。
3、變量采用駝峰命名法。由於JavaScript是一種弱類型語言,因此建議在變量名稱前加前綴:整形(i),浮點數(f),布爾型(b),字符串(s),數組(a)。但不強制這麼做,可根據個人愛好選擇,選擇好後就不要混用加前綴和不加前綴這兩種方式了。

二、布局
1、空格。
a)var與變量名之間留一個空格,變量名與等號之間留一個空格,等號與初始值之間留一個空格,初始值與分號之間不留空格。如:var i = 10;
b)使用字面量方式聲明引用類型變量時,各個屬性與冒號之間不留空格,冒號與初始值之間留一個空格。如:
復制代碼 代碼如下:
var Person = {
age: 16,
name: "Sam"
};

c)function與函數名之間留一個空格,函數名與()之間不留空格,()與{之間留一個空格。
d)函數的各個參數之間留一個空格。
e)if、while、for與左括號之間留一個空格,以強調關鍵字;switch、with與左括號之間不留空格。
f) 二元操作符與左右兩個操作數之間留一個空格。當某行代碼較長時,也可不留空格。
2、換行。
a)每行語句占用一行,不要多個語句一行。
b)if、while、for等塊級作用域後的大括號{不要另起一行,就放在關鍵字同一行。
3、縮進。
a)縮進使用4個空格,不要使用tab。
b)作用域不一樣時就應當進行縮進,以顯示出其層次關系。

三、注釋
1、合理添加注釋。注釋不能完全沒有,也不是越多越好。給重要的方法、變量和算法(或其他需要注意的問題)添加注釋即可。
2、修改源代碼時,需要同步修改注釋,保持兩者的一致。
3、不要在代碼中使用html方式的注釋。

四、規范
1、申明變量時必須加var關鍵字。雖然JavaScript允許不加var關鍵字,此時成為全局變量,但這是導致問題的一個來源。
2、申明變量時必須同時進行初始化,之後最好不要再改變變量的數據類型了。
3、語句末尾可以加分號的,必須加分號。
4、if、while、for等僅有一條語句時,也需要放在大括號內。
5、不要隨意使用全局變量,如果不得不使用,最好只用一個全局變量。
6、JavaScript與html、css之間應保持松散耦合。html是數據層,css是表現層,JavaScript是行為層,三者應避免緊密的耦合,否則會導致後期難以維護。html中不要有具體的JavaScript代碼,全部采用包含外部文件的方式;JavaScript中也盡量不要使用innerHTML等插入大量html元素,應考慮將元素放在html中,只不過初始隱藏即可;JavaScript中不要直接修改css中的具體屬性,而應通過className來間接修改。
7、不要修改不是由你所有的對象,不給其實例或原型添加屬性或方法,也不要重復定義其已有的方法。否則,當該對象的新版本添加了同名的屬性或方法時,會導致潛在的難以察覺的問題。解決方案有兩種:一是繼承,二是包含。
8、使用命名空間來防止多個庫之間的沖突,可參考YUI庫的組織方式。
9、對於代碼中出現的字面量,應將其放在某個變量的屬性中,屬性名首字母或所有字母大寫(模擬其他語言中的define或enum)。如:
復制代碼 代碼如下:
var Color = {
RED: 1,
BLUE: 2,
GREEN: 3
};

10、對函數中傳入的參數進行檢查。若為基本類型,使用typeof;若為引用類型,使用instanceOf;若要檢查某個對象是否包含某個方法,則對該方法使用typeof操作符,並與字符串"undefined"比較。

五、性能
1、避免全局查找。使用全局變量和函數的開銷要比使用局部變量和函數大,因為全局變量和函數涉及到作用域鏈的查找。因此,當函數中多次使用全局變量時,就會進行多次作用域鏈的查找,為了避免這個問題,可以將多次使用的全局變量賦值給一個局部變量,以後都使用該局部變量。
2、避免使用witch語句。with語句會創建自己的作用域,從而導致額外的開銷。
3、避免屬性查找。屬性查找是一個O(n)操作,對象上的任何屬性查找都比訪問變量和數組花費更多時間(訪問變量和數組是O(1)操作)。因此,如果多次用到同一個屬性,則應將其保存在局部變量中。如:
復制代碼 代碼如下:
var sUrl = window.location.href;
var sData = sUrl.substring(sUrl.indexOf("?"));
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved