一：工廠模式
工廠模式是為了解決多個類似對象聲明的問題;也就是為了解決實列化對象產生重復的問題。
優點：能解決多個相似的問題。
缺點：不能知道對象識別的問題(對象的類型不知道)。
function CreatePerson(name, age, gender) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function() {
return this.name;
}
return obj;
}
var p1 = new CreatePerson("jay", '36', '男');
var p2 = new CreatePerson("xiaotan", '21', '男');
console.log(p1.name); // jay
console.log(p1.age); // 36
console.log(p1.sex); // 男
console.log(p1.sayName()); // jay
console.log(p2.name); // xiaotan
console.log(p2.age); // 21
console.log(p2.sex); // 男
console.log(p2.sayName()); // xiaotan
// 返回都是object 無法識別對象的類型 不知道他們是哪個對象的實列
console.log(typeof p1); // object
console.log(typeof p2); // object
console.log(p1 instanceof Object); // true
二：單體模式
什么是單體模式？單體模式是一個用來劃分命名空間并將一批屬性和方法組織在一起的對象，如果它可以被實例化，那么它只能被實例化一次。
單體模式的優點是：
1.可以用來劃分命名空間，減少全局變量的數量。
2.使用單體模式可以使代碼組織的更為一致，使代碼容易閱讀和維護。
3.可以被實例化，且實例化一次。
如下代碼是單體模式的基本結構：
// 單體模式
var Singleton = function(name) {
this.name = name;
this.instance = null;
};
Singleton.prototype.getName = function() {
return this.name;
}
// 獲取實例對象
function getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
// 測試單體模式的實例
var a = getInstance("aa");
var b = getInstance("bb");
//因為單體模式是只實例化一次，所以下面的實例是相等的
console.log(a===b);//true
由于單體模式只實例化一次，因此第一次調用，返回的是a實例對象， 當我們繼續調用的時候，
b的實例就是a的實例，因此下面都是打印的是aa；
console.log(a.getName());//aa
console.log(b.getName());//aa
上面的封裝單體模式也可以改成如下結構寫法：
// 單體模式
var Singleton = function(name){
this.name = name;
};
Singleton.prototype.getName = function(){
return this.name;
}
// 獲取實例對象
var getInstance = (function() {
var instance = null;
return function(name) {
if(!instance) {
instance = new Singleton(name);
}
return instance;
}
})();
// 測試單體模式的實例
var a = getInstance("aa");
var b = getInstance("bb");
//因為單體模式是只實例化一次，所以下面的實例是相等的
console.log(a===b);//true
console.log(a.getName());//aa
console.log(b.getName());//aa
理解使用代理實現單列模式的好處
比如我現在頁面上需要創建一個div的元素，那么我們肯定需要有一個創建div的函數，而現在我只需要這個函數只負責創建div元素，其他的它不想管，也就是想實現單一職責原則，就好比淘寶的kissy一樣，一開始的時候他們定義kissy只做一件事，并且把這件事做好，具體的單體模式中的實例化類的事情交給代理函數去處理，這樣做的好處是具體的業務邏輯分開了，代理只管代理的業務邏輯，在這里代理的作用是實例化對象，并且只實例化一次;創建div代碼只管創建div，其他的不管；如下代碼：
// 單體模式
var CreateDiv = function(html) {
this.html = html;
this.init();
}
CreateDiv.prototype.init = function() {
var div = document.createElement("div");
div.innerHTML = this.html;
document.body.appendChild(div);
};
// 代理實現單體模式
var ProxyMode = (function() {
var instance;
return function(html) {
if(!instance) {
instance = new CreateDiv("我來測試下");
}
return instance;
}
})();
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");
console.log(a === b); // true
理解使用單體模式來實現彈窗的基本原理
下面我們繼續來使用單體模式來實現一個彈窗的demo；我們先不討論使用單體模式來實現，我們想下我們平時是怎么編寫代碼來實現彈窗效果的;比如我們有一個彈窗，默認的情況下肯定是隱藏的，當我點擊的時候，它需要顯示出來；如下編寫代碼：
// 實現彈窗
var createWindow = function() {
var div = document.createElement("div");
div.innerHTML = "我是彈窗內容";
div.style.display = 'none';
document.body.appendChild('div');
return div;
};
document.getElementById("Id").onclick = function() {
// 點擊后先創建一個div元素
var win = createWindow();
win.style.display = "block";
}
如上的代碼；大家可以看看，有明顯的缺點，比如我點擊一個元素需要創建一個div，我點擊第二個元素又會創建一次div，我們頻繁的點擊某某元素，他們會頻繁的創建div的元素，雖然當我們點擊關閉的時候可以移除彈出代碼，但是呢我們頻繁的創建和刪除并不好，特別對于性能會有很大的影響，對DOM頻繁的操作會引起重繪等，從而影響性能；因此這是非常不好的習慣；我們現在可以使用單體模式來實現彈窗效果，我們只實例化一次就可以了；如下代碼：
// 實現單體模式彈窗
var createWindow = (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("Id").onclick = function(){
// 點擊后先創建一個div元素
var win = createWindow();
win.style.display = "block";
}
理解編寫通用的單體模式
上面的彈窗的代碼雖然完成了使用單體模式創建彈窗效果，但是代碼并不通用，比如上面是完成彈窗的代碼，假如我們以后需要在頁面中一個iframe呢？我們是不是需要重新寫一套創建iframe的代碼呢？比如如下創建iframe：
var createIframe = (function() {
var iframe;
return function() {
if(!iframe) {
iframe = document.createElement("iframe");
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
return iframe;
};
})();
我們看到如上代碼，創建div的代碼和創建iframe代碼很類似，我們現在可以考慮把通用的代碼分離出來，使代碼變成完全抽象，我們現在可以編寫一套代碼封裝在getInstance函數內，如下代碼：
var getInstance = function(fn) {
var result;
return function() {
return result || (result = fn.call(this, arguments));
}
};
如上代碼：我們使用一個參數fn傳遞進去，如果有result這個實例的話，直接返回，否則的話(也就是result是false)，當前的getInstance函數調用fn這個函數，是this指針指向與這個fn這個函數；之后返回被保存在result里面；現在我們可以傳遞一個函數進去，不管他是創建div也好，還是創建iframe也好，總之如果是這種的話，都可以使用getInstance來獲取他們的實例對象；
如下測試創建iframe和創建div的代碼如下：
// 創建div
var createWindow = function() {
var div = document.createElement("div");
div.innerHTML = "我是彈窗內容";
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
// 創建iframe
var createIframe = function() {
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
return iframe;
};
// 獲取實例的封裝代碼
var getInstance = function(fn) {
var result;
return function() {
return result || (result = fn.call(this, arguments));
}
};
// 測試創建div
var createSingleDiv = getInstance(createWindow);
document.getElementById("Id").onclick = function() {
var win = createSingleDiv();
win.style.display = "block";
};
// 測試創建iframe
var createSingleIframe = getInstance(createIframe);
document.getElementById("Id").onclick = function() {
var win = createSingleIframe();
win.src = "http://cnblogs.com";
};
