javascript編程規範

司徒正美

為公司起草的javascript編程規範，參考了網上的許多資料，尤其是google的規範。現在放出來，希望能拋磚引玉，大家多提寶貴意見。

本規範是針對javascript函數式編程風格與公司嚴重依賴於jQuery進行編碼的現實制定出來。

禁止使用eval，with與caller(ecma262 v5 的use strict要求)。eval只允許在加密時機器產生。

聲明變數必須加上 var 關鍵字，除了在for(;;)迴圈等語句中，原則上不允許使用連續聲明。因為連續聲明的效率不如分開聲明高，而且很容易手誤致其暴露到全域範圍下。

常量，全部大寫。

變數名，不能使用拼音，英文單詞以駝峰風格組織起來。

分號，能加的地方都加(基本上除了for, function, if, switch, try, while外)，防止因為這個問題導致壓縮失敗。

自訂類，只能用於UI庫的構建，業務代碼不準私自訂類。

原則上不允許使用偽對象（String, Number，Boolean），直接用其字面量。

原則上不允許使用Array與Object，直接用其字面量[]， {}。

謹慎處理this，防止綁定失效，指向window，建議使用that引用它。

若想調用函數自身，禁止使用命名函數運算式，在目標函數的第一行編寫以下代碼實現,詳解請google 《命名函數運算式揭秘》：

var self = arguments.callee;

禁止擴充原生對象的原型，特別是Object.prototype。

禁止在頁面上對某個元素繫結事件，即下面的代碼風格

<a href="aaaa" jump="bbb" onclick="goto(this.jump)">跳轉到某頁面</a>

禁止使用IE的條件注釋，一壓縮就沒有了。

var f = function () { 

    /*@cc_on if (@_jscript) { return 2* @*/  3; /*@ } @*/ 

};

禁止塊內函式宣告，詳解請google《命名函數運算式揭秘》。

if (x) { //ng 

  function foo() {} 

} 

  

if (x) { 

  var foo = function() {} 

}

for-in 迴圈只能用於object。

禁止使用多行字串，因為在編譯時間, 不能忽略行起始位置的空白字元; "" 後的空白字元會產生奇 怪的錯誤; 雖然大多數指令碼引擎支援這種寫法, 但它不是 ECMAScript 的標準規範。

var myString = A rather long string of English text, an error message  

                actually that just keeps going and going -- an error  

                message to make the Energizer bunny blush (right through  

                those Schwarzenegger shades)! Where was I? Oh yes,  

                youve got an error and all the extraneous whitespace is  

                just gravy.  Have a nice day.;

原則上不允許字串拼接HTML代碼，請使用前台模板或後台模板。

字串字面量，使用 優於 "。

注釋，使用JSDoc。

每一行不宜過長，寫完一段代碼後請用IDE把它格式化一下。

為元素添加自訂變數，統一使用"data-"首碼，放便與HTML5的"data-*"機制相銜接。

禁止jQuery使用一行以上的鏈式操作，非常難讀。

元素的選擇，多使用ID選取器，類別選取器，標籤選取器，慎用子項目結構偽類與位置偽類(nth- child,:first,:eq,:gt)

在已有jQuery對象搜找附近的元素節點，不建議用使用多級的find尋找，而使用相關的遍曆函數

JavaScript程式應盡量放到外部的JS檔案中，以便壓縮與緩衝。

標準特性優於非標準特性（如果類庫有提供，優先使用類庫中的函數）。

$("XXXX").find("YYYY").find("ZZZZ"); //ng 

$("XXXX").next() //或者nextUntil, nextAll, prev, prevAll, prevUntl, children, closest,  

  

.siblings

為元素添加事件時，考慮的順序是delegate > live > bind。

jQuery在以下事件中存在問題 change resize mouseenter mouseleave mousewheel，大體上用不了事件代理，像mousewheel事件只能藉助於外掛程式。

不在JS檔案中留下未來確定不再使用的程式碼片段

凡是被jQuery引用到的ID或類名都應該用js_作為首碼，警示其他人在調整樣式時把它誤刪了。

JS代碼必須置於$$命名空間對象之內，所有函數的執行從main函數開始。

     ;;;$(function(){ 

//...其他用到的變數 

        var $$ = window.$$ = { 

          //本頁面私人的輔助函數1 

          _assist1:function(){ 

  

          }, 

          //本頁面私人的輔助函數2 

          _assist2:function(){ 

  

          }, 

          //本頁面私人的輔助函數3 

          _assist3:function(){ 

  

          }, 

          //本頁面私人的輔助函數4 

          _assist4:function(){ 

  

          }, 

          //本頁面私人的輔助函數5 

          _assist5:function(){ 

  

          }, 

//....更多的私人函數 

          //功能1 

          feature1:function(){ 

  

          }, 

          //功能2 

          feature2:function(){ 

  

          }, 

          //功能3 

          feature3:function(){ 

  

          }, 

          //功能4 

          feature4:function(){ 

  

          }, 

          //功能5 

          feature5:function(){ 

  

          }, 

          //從後台擷取的JSON資料統一放到這個對象中，以便其他函數調用 

          jsons:{}, 

//....更多需求，一個需求對應一個函數 

          main:function(){ 

            $$.feature1(); 

            $$.feature2(); 

            $$.feature3(); 

            $$.feature4(); 

//....在main主函數中調用它們。 

          } 

      &nb