上述代碼雖然實(shí)現(xiàn)了工廠模式，但是switch始終感覺(jué)不是很優(yōu)雅。我們使用面向?qū)ο蟾脑煜聀opup，將它改為一個(gè)類，將不同類型的彈窗掛載在這個(gè)類上成為工廠方法： 

function popup(type, content, color) {  
  // 如果是通過(guò)new調(diào)用的，返回對(duì)應(yīng)類型的彈窗  
  if(this instanceof popup) {  
    return new this[type](content, color);  
  } else {  
    // 如果不是new調(diào)用的，使用new調(diào)用，會(huì)走到上面那行代碼  
    return new popup(type, content, color);  
  }  
}  
// 各種類型的彈窗全部掛載在原型上成為實(shí)例方法  
popup.prototype.infoPopup = function(content, color) {}  
popup.prototype.confirmPopup = function(content, color) {}  
popup.prototype.cancelPopup = function(content, color) {} 

封裝成模塊

這個(gè)popup不僅僅讓我們調(diào)用的時(shí)候少了一個(gè)new，他其實(shí)還把相關(guān)的各種彈窗都封裝在了里面，這個(gè)popup可以直接作為模塊export出去給別人調(diào)用，也可以掛載在window上作為一個(gè)模塊給別人調(diào)用。因?yàn)閜opup封裝了彈窗的各種細(xì)節(jié)，即使以后popup內(nèi)部改了，或者新增了彈窗類型，或者彈窗類的名字變了，只要保證對(duì)外的接口參數(shù)不變，對(duì)外面都沒(méi)有影響。掛載在window上作為模塊可以使用自執(zhí)行函數(shù)： 

(function(){  
     function popup(type, content, color) {  
    if(this instanceof popup) {  
      return new this[type](content, color);  
    } else {  
      return new popup(type, content, color);  
    }  
  }  
  popup.prototype.infoPopup = function(content, color) {}  
  popup.prototype.confirmPopup = function(content, color) {}  
  popup.prototype.cancelPopup = function(content, color) {} 
  window.popup = popup;  
})()  
// 外面就直接可以使用popup模塊了  
let infoPopup1 = popup('infoPopup', content, color);  

jQuery的工廠模式

jQuery也是一個(gè)典型的工廠模式，你給他一個(gè)參數(shù)，他就給你返回符合參數(shù)DOM對(duì)象。那jQuery這種不用new的工廠模式是怎么實(shí)現(xiàn)的呢？其實(shí)就是jQuery內(nèi)部幫你調(diào)用了new而已，jQuery的調(diào)用流程簡(jiǎn)化了就是這樣: 

(function(){  
  var jQuery = function(selector) {  
    return new jQuery.fn.init(selector);   // new一下init, init才是真正的構(gòu)造函數(shù)  
  }  
  jQueryjQuery.fn = jQuery.prototype;     // jQuery.fn就是jQuery.prototype的簡(jiǎn)寫  
  jQuery.fn.init = function(selector) {  
    // 這里面實(shí)現(xiàn)真正的構(gòu)造函數(shù) 
   }  
  // 讓init和jQuery的原型指向同一個(gè)對(duì)象，便于掛載實(shí)例方法  
  jQueryjQuery.fn.init.prototype = jQuery.fn;   
  // 最后將jQuery掛載到window上  
  window.$ = window.jQuery = jQuery;  
})(); 

上述代碼結(jié)構(gòu)來(lái)自于jQuery源碼，從中可以看出，你調(diào)用時(shí)省略的new在jQuery里面幫你調(diào)用了，目的是為了使大量調(diào)用更方便。但是這種結(jié)構(gòu)需要借助一個(gè)init方法，最后還要將jQuery和init的原型綁在一起，其實(shí)還有一種更加簡(jiǎn)便的方法可以實(shí)現(xiàn)這個(gè)需求: 

var jQuery = function(selector) {  
  if(!(this instanceof jQuery)) {  
    return new jQuery(selector);  
  }  
  // 下面進(jìn)行真正構(gòu)造函數(shù)的執(zhí)行  
} 

上述代碼就簡(jiǎn)潔多了，也可以實(shí)現(xiàn)不用new直接調(diào)用，這里利用的特性是this在函數(shù)被new調(diào)用時(shí)，指向的是new出來(lái)的對(duì)象，new出來(lái)的對(duì)象自然是類的instance，這里的this instanceof jQuery就是true。如果是普通調(diào)用，他就是false，我們就幫他new一下。

建造者模式

建造者模式是用于比較復(fù)雜的大對(duì)象的構(gòu)建，比如Vue，Vue內(nèi)部包含一個(gè)功能強(qiáng)大，邏輯復(fù)雜的對(duì)象，在構(gòu)建的時(shí)候也需要傳很多參數(shù)進(jìn)去。像這種需要?jiǎng)?chuàng)建的情況不多，創(chuàng)建的對(duì)象本身又很復(fù)雜的時(shí)候就適用建造者模式。建造者模式的一般結(jié)構(gòu)如下： 

function Model1() {}   // 模塊1  
function Model2() {}   // 模塊2  
// 最終使用的類  
function Final() {  
  this.model1 = new Model1();  
  this.model2 = new Model2();  
}  
// 使用時(shí)  
var obj = new Final(); 

上述代碼中我們最終使用的是Final，但是Final里面的結(jié)構(gòu)比較復(fù)雜，有很多個(gè)子模塊，F(xiàn)inal就是將這些子模塊組合起來(lái)完成功能，這種需要精細(xì)化構(gòu)造的就適用于建造者模式。

實(shí)例：編輯器插件

假設(shè)我們有這樣一個(gè)需求：

寫一個(gè)編輯器插件，初始化的時(shí)候需要配置大量參數(shù)，而且內(nèi)部的功能很多很復(fù)雜，可以改變字體顏色和大小，也可以前進(jìn)后退。

一般一個(gè)頁(yè)面就只有一個(gè)編輯器，而且里面的功能可能很復(fù)雜，可能需要調(diào)整顏色，字體等。也就是說(shuō)這個(gè)插件內(nèi)部可能還會(huì)調(diào)用其他類，然后將他們組合起來(lái)實(shí)現(xiàn)功能，這就適合建造者模式。我們來(lái)分析下做這樣一個(gè)編輯器需要哪些模塊:

1.   編輯器本身肯定需要一個(gè)類，是給外部調(diào)用的接口
2.   需要一個(gè)控制參數(shù)初始化和頁(yè)面渲染的類
3.   需要一個(gè)控制字體的類
4.   需要一個(gè)狀態(tài)管理的類 

// 編輯器本身，對(duì)外暴露  
function Editor() {  
  // 編輯器里面就是將各個(gè)模塊組合起來(lái)實(shí)現(xiàn)功能  
  this.initer = new HtmlInit();  
  this.fontController = new FontController();  
  this.stateController = new StateController(this.fontController);  
}  
// 初始化參數(shù)，渲染頁(yè)面  
function HtmlInit() { 
 }  
HtmlInit.prototype.initStyle = function() {}     // 初始化樣式  
HtmlInit.prototype.renderDom = function() {}     // 渲染DOM  
// 字體控制器  
function FontController() {  
}  
FontController.prototype.changeFontColor = function() {}    // 改變字體顏色  
FontController.prototype.changeFontSize = function() {}     // 改變字體大小  
// 狀態(tài)控制器  
function StateController(fontController) {  
  this.states = [];       // 一個(gè)數(shù)組，存儲(chǔ)所有狀態(tài)  
  this.currentState = 0;  // 一個(gè)指針，指向當(dāng)前狀態(tài)  
  this.fontController = fontController;    // 將字體管理器注入，便于改變狀態(tài)的時(shí)候改變字體  
}  
StateController.prototype.saveState = function() {}     // 保存狀態(tài)  
StateController.prototype.backState = function() {}     // 后退狀態(tài)  
StateController.prototype.forwardState = function() {}     // 前進(jìn)狀態(tài) 

上面的代碼其實(shí)就將一個(gè)編輯器插件的架子搭起來(lái)了，具體實(shí)現(xiàn)功能就是往這些方法里面填入具體的內(nèi)容就行了，其實(shí)就是各個(gè)模塊的相互調(diào)用，比如我們要實(shí)現(xiàn)后退狀態(tài)的功能就可以這樣寫: 

StateController.prototype.backState = function() {  
  var state = this.states[this.currentState - 1];  // 取出上一個(gè)狀態(tài)  
  this.fontController.changeFontColor(state.color);  // 改回上次顏色  
  this.fontController.changeFontSize(state.size);    // 改回上次大小  
} 

單例模式

單例模式適用于全局只能有一個(gè)實(shí)例對(duì)象的場(chǎng)景，單例模式的一般結(jié)構(gòu)如下： 

function Singleton() {} 
 Singleton.getInstance = function() {  
  if(this.instance) {  
    return this.instance;  
  }  
  this.instance = new Singleton();  
  return this.instance;  
} 

上述代碼中，Singleton類掛載了一個(gè)靜態(tài)方法getInstance，如果要獲取實(shí)例對(duì)象只能通過(guò)這個(gè)方法拿，這個(gè)方法會(huì)檢測(cè)是不是有現(xiàn)存的實(shí)例對(duì)象，如果有就返回，沒(méi)有就新建一個(gè)。

實(shí)例：全局?jǐn)?shù)據(jù)存儲(chǔ)對(duì)象

假如我們現(xiàn)在有這樣一個(gè)需求:

我們需要對(duì)一個(gè)全局的數(shù)據(jù)對(duì)象進(jìn)行管理，這個(gè)對(duì)象只能有一個(gè)，如果有多個(gè)會(huì)導(dǎo)致數(shù)據(jù)不同步。

這個(gè)需求要求全局只有一個(gè)數(shù)據(jù)存儲(chǔ)對(duì)象，是典型的適合單例模式的場(chǎng)景，我們可以直接套用上面的代碼模板，但是上面的代碼模板獲取instance必須要調(diào)getInstance才行，要是某個(gè)使用者直接調(diào)了Singleton()或者new Singleton()就會(huì)出問(wèn)題，這次我們換一種寫法，讓他能夠兼容Singleton()和new Singleton()，使用起來(lái)更加傻瓜化: 

function store() {  
  if(store.instance) {  
    return store.instance;  
  }  
  store.instance = this;  
} 

上述代碼支持使用new store()的方式調(diào)用，我們使用了一個(gè)靜態(tài)變量instance來(lái)記錄是否有進(jìn)行過(guò)實(shí)例化，如果實(shí)例化了就返回這個(gè)實(shí)例，如果沒(méi)有實(shí)例化說(shuō)明是第一次調(diào)用，那就把this賦給這個(gè)這個(gè)靜態(tài)變量，因?yàn)槭鞘褂胣ew調(diào)用，這時(shí)候的this指向的就是實(shí)例化出來(lái)的對(duì)象，并且最后會(huì)隱式的返回this。

如果我們還想支持store()直接調(diào)用，我們可以用前面工廠模式用過(guò)的方法，檢測(cè)this是不是當(dāng)前類的實(shí)例，如果不是就幫他用new調(diào)用就行了： 

function store() {  
  // 加一個(gè)instanceof檢測(cè)  
  if(!(this instanceof store)) {  
    return new store();  
  }   
  // 下面跟前面一樣的  
  if(store.instance) {  
    return store.instance;  
  } 
   store.instance = this; 
 } 

然后我們用兩種方式調(diào)用來(lái)檢測(cè)下:

實(shí)例：vue-router

vue-router其實(shí)也用到了單例模式，因?yàn)槿绻粋€(gè)頁(yè)面有多個(gè)路由對(duì)象，可能造成狀態(tài)的沖突，vue-router的單例實(shí)現(xiàn)方式又有點(diǎn)不一樣，下列代碼來(lái)自vue-router源碼： 

let _Vue;  
function install(Vue) {  
  if (install.installed && _Vue === Vue) return;  
  install.installed = true  
  _Vue = Vue  
} 

每次我們調(diào)用vue.use(vueRouter)的時(shí)候其實(shí)都會(huì)去執(zhí)行vue-router模塊的install方法，如果用戶不小心多次調(diào)用了vue.use(vueRouter)就會(huì)造成install的多次執(zhí)行，從而產(chǎn)生不對(duì)的結(jié)果。vue-router的install在第一次執(zhí)行時(shí)，將installed屬性寫成了true，并且記錄了當(dāng)前的Vue，這樣后面在同一個(gè)Vue里面再次執(zhí)行install就會(huì)直接return了，這也是一種單例模式。

可以看到我們這里三種代碼都是單例模式，他們雖然形式不一樣，但是核心思想都是一樣的，都是用一個(gè)變量來(lái)標(biāo)記代碼是否已經(jīng)執(zhí)行過(guò)了，如果執(zhí)行過(guò)了就返回上次的執(zhí)行結(jié)果，這樣就保證了多次調(diào)用也會(huì)拿到一樣的結(jié)果。

原型模式

原型模式最典型的應(yīng)用就是JS本身啊，JS的原型鏈就是原型模式。JS中可以使用Object.create指定一個(gè)對(duì)象作為原型來(lái)創(chuàng)建對(duì)象: 

const obj = {  
  x: 1,  
  func: () => {}  
}  
// 以obj為原型創(chuàng)建一個(gè)新對(duì)象  
const newObj = Object.create(obj);  
console.log(newObj.__proto__ === obj);    // true  
console.log(newObj.x);    // 1 

上述代碼我們將obj作為原型，然后用Object.create創(chuàng)建的新對(duì)象都會(huì)擁有這個(gè)對(duì)象上的屬性和方法，這其實(shí)就算是一種原型模式。還有JS的面向?qū)ο笃鋵?shí)更加是這種模式的體現(xiàn)，比如JS的繼承可以這樣寫: 

function Parent() {  
  this.parentAge = 50;  
}  
function Child() {}  
Child.prototype = new Parent();  
ChildChild.prototype.constructor = Child;      // 注意重置constructor  
const obj = new Child();  
console.log(obj.parentAge);    // 50 

這里的繼承其實(shí)就是讓子類Child.prototype.__proto__的指向父類的prototype，從而獲取父類的方法和屬性。JS中面向?qū)ο蟮膬?nèi)容較多，我這里不展開了，有一篇文章專門講這個(gè)問(wèn)題。

總結(jié)

1.  很多用起來(lái)順手的開源庫(kù)都有良好的封裝，封裝可以將內(nèi)部環(huán)境和外部環(huán)境隔離，外部用起來(lái)更順手。
2.  針對(duì)不同的場(chǎng)景可以有不同的封裝方案。
3.  需要大量產(chǎn)生類似實(shí)例的組件可以考慮用工廠模式來(lái)封裝。
4.  內(nèi)部邏輯較復(fù)雜，外部使用時(shí)需要的實(shí)例也不多，可以考慮用建造者模式來(lái)封裝。
5.  全局只能有一個(gè)實(shí)例的需要用單例模式來(lái)封裝。
6.  新老對(duì)象之間可能有繼承關(guān)系的可以考慮用原型模式來(lái)封裝，JS本身就是一個(gè)典型的原型模式。
7.  使用設(shè)計(jì)模式時(shí)不要生搬硬套代碼模板，更重要的是掌握思想，同一個(gè)模式在不同的場(chǎng)景可以有不同的實(shí)現(xiàn)方案。