JavaScript重構(四):JavaScript編碼規則

沒有規矩,不成方圓,JavaScript帶來瞭靈活性,也帶來瞭不受控的變量和訪問,所以要用規則限制它。一支成熟的團隊,還是一支新鮮的團隊,規則應當是不一樣的,我隻是列出一些常見的或者有效的辦法,來約束跳躍的開發人員,思維可以任意飛躍,代碼卻要持續受控。當然,任何規則都是建立在一定的認知基礎之上的,面向對象JavaScript的基礎是必備的,否則一切無從談起。
 
變量和方法控制:
模塊開發不允許存放獨立的全局變量、全局方法,隻允許把變量和方法放置到相應模塊的“命名空間”中,對此的解釋請參見此文。實在心癢瞭,那麼使用匿名函數如何?
Java代碼 
(function() {  
  var value = 'xxx';  
  var func = function() {…};  
})(); 
 
模塊化需要嚴格控制住代碼的區域性,這不僅僅是代碼可維護性、可定制性的一方面,同時也讓JavaScript引擎在屬性和方法使用完畢後及時地回收掉。
不允許在模塊代碼中污染原生對象,例如
Js代碼 
String.prototype.func = new function(){…};  
 
如此的代碼必須集中控制,例如統一放置在common.js中,嚴格保護起來。
 
數據存放約束:
普通變量、prototype變量和function變量分而治之,方法名一律大寫開頭,變量名還是遵從駱駝命名法如何:
Java代碼 
function T(name){  
  T.prototype._instance_number++;  
  this.name = name;  
  this.showName=function(){  
    alert(this.name);  
  }  
};  
T.prototype = {  
  _instance_number:0,  
  getInstanceNum: function(){  
    return T.prototype._instance_number;  
  }  
};  
 
var t = new T("PortalONE");  
t.showName();  
new T("Again");  
alert(t.getInstanceNum()); //打印:2 
 
這裡有意做瞭一件事情,T內部的屬性和私有方法使用下劃線開頭,這樣很好地實現瞭封裝(上述代碼中如果使用t.instanceNum,是無法訪問到這個值的),如果這段代碼都看不懂的話,趕緊溫習一下JavaScript的面向對象吧 :)。JavaScript中提供瞭閉包和原型兩種辦法來實現繼承和多態,關於重構中應用這一點,後續的章節我再囉嗦吧。
另外,優先使用JavaScript的原生對象和容器,比如Array,Ajax的數據類型統一切到JSON上來,盡量不要使用隱藏域;另外,通常是不允許隨意擴展DOM對象的。
至於模塊間的通信:模塊間的通信意味著模塊間的耦合性,是需要嚴格避免的;通信的途徑通常使用方法級屬性或者模塊級的prototype變量。
 
DOM操縱規則:
在模塊代碼中,通常要求把對DOM的操縱獨立到模塊js中,應當避免在DOM模型上顯示地寫時間觸發函數,例如:
<p onclick="xxx" />
借助JQuery基於bind的一系列方法,把行為邏輯獨立出來以後,完全可以看到清爽的HTML標簽。
DOM對象的訪問通常使用id來查找,偶有根據name來查找的,過多次數地、不合理地遍歷DOM樹是前端性能保持的大忌。
 
CSS的樣式控制:
(1)盡量拒絕style="xxx"的寫法,主要目的是將樣式統一到主題樣式表單中,當然主題樣式表單也是按模塊存放的,對於不同語種的定制和不同風格的切換帶來便利。
(2)規約JavaScript對樣式的操縱,理想狀況下,封裝性好的UI可以自由地替換它的樣式集合。
 
以上隻能算冰山一角,拋磚引玉,實際項目中需要在開發過程中逐步細化和完善。

作者“四火的BLOG”
 

發佈留言