單體(singleton)模式是js最有用的模式之一。在seajs的require和es6的import出現之前,單體模式用來劃分命名空間,減少全局變量數目,也可以在一種名為分支的技術中用來封裝瀏覽器差異。
最簡單的單體是一個對象字面量,通過一個唯一變量Singleton存儲對象引用
var Singleton = { attribute1: true, attribute2: 10, method1: function(){ }, method2: function(){ } }單體對象由兩部分組成:包含著方法和屬性成員的對象,以及用于訪問它的變量。這個變量通常是全局性的(如上文的Singleton對象)。命名空間是js的重要工具,在js中什么都可以被改寫
function a(){ } // The a function has been overwritten. var a = document.getElementById('a')所以最好的方式是
var myNameSpace = { a: function(){ } }當我們想調用a函數的時候,不是a(),而是myNameSpace.a()。命名空間還可以進一步分割,js代碼除了你自己寫的之外,還有庫代碼、廣告代碼等等,這些變量都出現在網頁的全局命名空間中,為了避免沖突,可以對他們進行分組,比如定義一個包含自己代碼的全局對象,然后把代碼和數據組織到這個對象的各個對象(單體)中
var coreGroup = { } coreGroup.common = { ... }zepto和jquery都通過$創建了一個命名空間。
分支的原理其實就是創建兩個或多個字面量
myNameSpace.Singleton = (function(){ var ObjectA = { method1: function(){ }, method2: function(){ } }; var ObjectB = { method1: function(){ }, method2: function(){ } } return (someCondition) ? objectA : objectB; })();這邊的someCondition一般是能力檢測的結果,比如瀏覽器差異,ie瀏覽器和其他瀏覽器等等。當然分支技術性能不一定好,因為兩個對象創建在內存中,而我們只使用了一個。但是只使用了一次判斷,比在后續代碼中不斷使用判斷也強不少,所以在縮短計算時間和占用更多內存上,要進行考量。
新聞熱點
疑難解答