溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript設計模式之單例模式原理與用法。分享給大家供大家參考，具體如下：
單例模式的定義：保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。
單例模式是一種常用的模式，有些對象只需要一個，如線程池、全局緩存、瀏覽器中的window對象等，這時候可以用到單例模式。
單例模式典型的應用場景：單擊按鈕時，頁面中會出現一個登陸浮窗，而該登錄浮窗是唯一的，無論單擊多少次按鈕，這個浮窗都會被創建一次，則適合用單例模式創建。
全局變量不是單例模式，但在JavaScript開發中，經常會把全局變量當成單例來使用。
使用var a = {};這種方式創建對象a時，對象a是獨一無二的，若變量a被聲明在全局作用域下，則可以在代碼的任何位置使用這個變量。這顯然滿足單例模式的兩個條件。
但是全局變量存在很多問題，很容易造成命名空間污染，如上面的var a = {};隨時有可能被覆蓋。
有必要盡量減少全局變量的使用，即使需要，也應該把它的污染降到最低。
降低全局變量帶來的命名污染的幾種方式：
1) 使用命名空間
適當地使用命名空間，并不會杜絕全局變量，但可以減少全局變量的數量。
把a和b都定義為namespace的屬性，這樣可以減少變量和全局作用域打交道的機會：
var namespace = {
a: function() {
alert("a");
},
b: function() {
alert("b");
}
};
動態地創建命名空間：
var obj = {};
obj.namespace = function(name) {
var tips = name.split('.');
var cur = obj;
for (var i in tips) {
if (!cur[tips[i]])
cur[tips[i]] = {};
cur = cur[tips[i]];
}
};
obj.namespace('name');
obj.namespace('birth.year');
console.dir(obj);
上述代碼等價于：
var obj = {
name: {},
birth: {
year: {}
}
};
2) 使用閉包封裝私有變量
var person = (function() {
var_name = "Alice";
var _id = 16;
return {
getUserInfo: function() {
return _name + ": " + _id;
}
}
})();
使用下劃線來約定私有變量_name和_age，它們被封裝在閉包產生的作用域中，外部是訪問不到這兩個變量的，這就避免了對全局的命令污染。
惰性單例模式：
在需要的時候才創建對象實例。
var createBox = (function() {
var div;
return function() {
if (!div) {
div = document.createElement('div');
div.innerHTML = '登錄';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
document.getElementById('btn').onclick = function() {
var box = createBox();
box.style.display = 'block';
};
用變量div來判斷是否已經創建過浮窗。
通用的惰性單例：
問題：上面的惰性單例實例是違反單一職責原則的，創建對象和管理單例的邏輯都放在createBox對象內部。若下次要創建頁面中唯一的iframe，需要把createBox幾乎照抄一遍。
var createIframe = (function() {
var iframe;
return function() {
if (!iframe) {
iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
}
return div;
}
})();
解決：把不變的部分隔離出來，其實，管理單例的邏輯可以完全抽象出來，因為它們的邏輯是一樣的：用一個變量來標記是否創建過對象，若是，則在下次直接返回已經創建好的對象。
var createSingle = function(func) {
var flag;
return flag || (flag = func.apply(this, arguments));
};
var createBox = function() {
var div = document.createElement('div');
div.innerHTML = '登錄';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
document.getElementById('btn').onclick = function() {
var box = createBox();
box.style.display = 'block';
};
var createIframe = createSingle(function() {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
});
document.getElementById('btn').onclick = function() {
var iframe = createIframe();
iframe.style.display = 'block';
};
單例模式的其他用途：
單例模式的用途遠不止于創建對象，比如click事件只需要在第一次渲染頁面時綁定一次，顯然運用jQuery的one()方法可以實現。若運用createSingle 方法，也很容易實現：
var createSingle = function(func) {
var flag;
return flag || (flag = func.apply(this, arguments));
};
var bindEvent = createSingle(function() {
document.getElementById(‘div').onclick = function() {
...
};
return true;
});
var render = function() {
bindEvent();
};
render();
render();
render();
render()函數與bindEvent()函數執行了3次，但div實際上只被綁定了一次。
更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
