JavaScript最佳實踐一

變量和函數名有意義

選擇易理解和簡短的名字作為變量和方法。

糟糕的命名

x1 fe2 xbqne

同樣糟糕的命名

incrementerForMainLoopWhichSpansFromTenToTwenty }
createNewMemberIfAgeOverTwentyOneAndMoonIsFull

盡量避免使用變量和方法的名字去解釋值。

或許在其他一些國家是沒有意義

isOverEighteen() 

通用

isLegalAge() 

你的代碼就是一個故事，請保持故事情節深入人心（容易閱讀）。

避免全局

全局變量是一個相當可怕的。

原因：你代碼中的全局變量即有可能被覆蓋。

變通：使用閉包和模塊模式。

問題：所有的全局變量在其他地方都可以訪問，這是不可避免的。

var current = null; 
var labels = { 'home':'home', 'articles':'articles', 'contact':'contact' }; function init(){
}; function show(){
   current = 1;
}; function hide(){
   show();
};

對象字面量：其中的任何東西都需要通過對象的名字獲得。

問題：重復的模塊名字會產生大量的代碼而且令人厭煩。

demo = {
   current:null,
   labels:{ 'home':'home', 'articles':'articles', 'contact':'contact' },
   init:function(){
   },
   show:function(){
      demo.current = 1;
   },
   hide:function(){
      demo.show();
   }
}

模塊模式：你需要指出哪些可以全局使用哪些不可以－－在這兩之間取舍。

問題：重復的模塊名字，內部函數使用不同的語法。

module = function(){ var labels = { 'home':'home', 'articles':'articles', 'contact':'contact' }; return {
      current:null,
      init:function(){
      },
      show:function(){ module.current = 1;
      },
      hide:function(){ module.show();
      }
   }
}();

揭露模塊模式：保持相同的代碼風格同時暴露全局方法和變量。

module = function(){ var current = null; 
var labels = { 'home':'home', 'articles':'articles', 'contact':'contact' }; 
var init = function(){
   }; var show = function(){
      current = 1;
   }; var hide = function(){
      show();
   } return{init:init, show:show, current:current}
}(); module.init();

使用嚴格模式

瀏覽器的JavaScript解析引擎有很強大的容錯能力，當你需要移植代碼或者交接代碼給同事時，松散的代碼就會給你帶來麻煩。所以代碼檢查才能保證代碼的安全。

檢查你的代碼：http://www.jslint.com/

代碼注釋適中為好

好的代碼不需解釋

這是一個夸張的迷信。

注釋那些你認為需要解釋的地方，但是記住不要講解你的人生故事（不要太長）。

避免使用單行注釋//，使用/ /更安全，當換行時不會產生錯誤。

如果你使用注釋來調試代碼，這是一個很好的技巧：

module = function(){
   var current = null;
/*
   var init = function(){
   };
   var show = function(){
      current = 1;
   };
   var hide = function(){
      show();
   }
// */ return{init:init, show:show, current:current}
}();

注釋不能出現在用戶面前。開發代碼不是活的代碼(開發代碼不是面向用戶的代碼)

避免技術混用

JavaScript很擅長計算，獲取外部數據（Ajax）以及根據事件做出相應的回應。

例如：

在類名為mandatory且其值為空時在外圍加上紅色邊框。

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input'); 
for(var i=0,j=inputs.length;i<j;i++){
   if(inputs[i].className === 'mandatory' && inputs.value === ''){
      inputs[i].style.borderColor = '#f00';
      inputs[i].style.borderStyle = 'solid';
      inputs[i].style.borderWidth = '1px';
   }
} 

兩個月后，產品改版不要加紅色邊框，要在在字段后面增加一個提示圖標。

其他開發會改變你的JavaScript代碼為如下：

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input'); 
for(var i=0,j=inputs.length;i<j;i++){
   if(inputs[i].className === 'mandatory' && inputs.value === ''){
      inputs[i].className+=' error';
   }
} 

使用短路符號

你一旦習慣使用短路符號，就會發現你的代碼簡潔并且容易閱讀。

原代碼：

var lunch = new Array(); 
lunch[0]='Dosa'; 
lunch[1]='Roti'; 
lunch[2]='Rice'; 
lunch[3]='what the heck is this?'; 

改后代碼：

var lunch = [ 'Dosa', 'Roti', 'Rice', 'what the heck is this?'
];

原代碼：

if(v){ var x = v;
} else { var x =10;
}

改后代碼：

var x = v || 10; 

模塊化

保持代碼模塊化和職責單一性。

很容易寫出一個方法來處理好多事情，可是當你要擴展功能時，你應該拆分多個方法去實現相應的功能。

為了防止出現類似的情況，你應該保證代碼的簡單和通用去完成功能，而不是大而全的方法去實現。

在另一個功能時，你可以使用揭示模式暴露方法以此來擴展方法。

好的代碼應該容易擴展而不需要重寫核心代碼。

漸進增強

避免JavaScript代碼的高度耦合。

DOM的生成耗費時間并且代價昂貴。

有些元素的生成依賴JavaScript，但當JavaScript代碼被禁用時，用戶看到的頁面就不會那么友好。

允許配置和轉移

你的代碼會隨時被改變。

包括標簽，類名和IDs以及外觀。

把這些放到可配置項中，使你的代碼易維護并可定制。

例如：

carousel = function(){ var config = {
      CSS:{
         classes:{
            current:'current',
            scrollContainer:'scroll' },
         IDs:{
            maincontainer:'carousel' }
      },
      labels:{
         previous:'back',
         next:'next',
         auto:'play' },
      settings:{
         amount:5,
         skin:'blue',
         autoplay:false },
   }; function init(){
   }; function scroll(){
   }; function highlight(){
   }; return {config:config,init:init}
}();

總結

在這一節，我們講到來命名規范，注釋以及一些代碼組織的建議。

原文：javascript-best-practices-1