首頁 > web前端 > js教程 > JavaScript編碼規則

JavaScript編碼規則

高洛峰
發布: 2016-11-25 13:30:58
原創
985 人瀏覽過

沒有規矩,不成方圓,JavaScript帶來了靈活性,也帶來了不受控的變數和訪問,所以要用規則限制它。一支成熟的團隊,還是一支新鮮的團隊,規則應是不一樣的,我只是列出一些常見的或者有效的辦法,來約束跳躍的開發人員,思維可以任意飛躍,代碼卻要持續受控。當然,任何規則都是建立在一定的認知基礎上的,物件導向JavaScript的基礎是必備的,否則一切無從談起。
 
變數和方法控制:
模組開發不允許存放獨立的全域變數、全域方法,只允許把變數和方法放置到對應模組的「命名空間」中,對此的解釋請參見此文。實在心癢了,那麼使用匿名函數如何?
Java程式碼 
(function() {  
  var value = 'xxx';  
  var func = function() {...};  
})();com不僅是程式碼可維護性、可自訂性的一方面,同時也讓JavaScript引擎在屬性和方法使用完畢後及時地回收掉。
不允許在模組程式碼中污染原生對象,例如
Js程式碼 
String.prototype.func = new function(){...};  
 
如此的程式碼必須集中控制,例如統一放置在common.js中,嚴格保護起來。
 
資料存放限制:
普通變數、prototype變數與function變數分而治之,方法名稱一律大寫開頭,變數名稱還是遵從駱駝命名法如何:
Java程式碼 
function T(name ++o? this.name = name;  
  this.showName=function(){  
    alert(this.name);  
  }  
} Num: function(){  
    return T. prototype._instance_number;  
  }  
};  
 
var t = new T("PortalONE");  
t.showName();印刷:2 
 
這裡有意做了一件事情,T內部的屬性和私有方法使用下劃線開頭,這樣很好地實現了封裝(上述代碼中如果使用t.instanceNum,是無法訪問到這個值的),如果這段程式碼都看不懂的話,趕快溫習一下JavaScript的物件導向吧:)。 JavaScript中提供了閉包和原型兩種辦法來實現繼承和多態,關於重構中應用這一點,後續的章節我再??擄傘?br /> 另外,優先使用JavaScript的原生對象和容器,例如Array,Ajax的資料型別統一切到JSON上來,盡量不要使用隱藏域;另外,通常是不允許隨意擴充DOM物件的。
至於模組間的通訊:模組間的通訊意味著模組間的耦合性,是需要嚴格避免的;通訊的途徑通常使用方法級屬性或模組級的prototype變數。
 
DOM操縱規則:
在模組程式碼中,通常要求將對DOM的操縱獨立到模組js中,應當避免在DOM模型上顯示地寫時間觸發函數,例如:


借助JQuery基於bind的一系列方法,把行為邏輯獨立出來以後,完全可以看到清爽的HTML標籤。
DOM物件的存取通常使用id來查找,偶有根據name來查找的,過多次數地、不合理地遍歷DOM樹是前端性能保持的大忌。
 
CSS的樣式控制:
(1)盡量拒絕style="xxx"的寫法,主要目的是將樣式統一到主題樣式表單中,當然主題樣式表單也是按模組存放的,對於不同語種的定制和不同風格的切換帶來便利。
(2)規約JavaScript對樣式的操縱,理想狀況下,封裝性好的UI可以自由地替換它的樣式集合。
 
以上只能算冰山一角,拋磚引玉,實際專案需要在開發過程中逐步精進完善。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板