我為什么把他們兩個放在一起講？我覺得這兩個設計模式有相似之處，有時候會一個設計模式不能滿足你的需求而采用另一種設計模式?；谶@點考慮，而且為了大家更好地理解，我放到了一起，加深大家的印象，活學活用。

[這里我為了能更好的體現下設計模式與JS本體語言的結合，我用了一點繼承關系. 有的同學都不知道JS能繼承，就算大家不懂繼承也希望大家能看下去，弄懂它！] 復制代碼

本文擴展

掘金有個文章繼承還是蠻透徹的 JS原型鏈與繼承別再被問倒了

工廠模式

• 創建對象跟對不同需求進行不同的實例化

在我們Team協作開發過程當中，不同于我們寫個人項目，對全局變量的限制很大，我們要盡量少的使用全局變量，對于一類對象在不同需求上的不同使用，甚至將一些有些類似的方法抽象化，可以用工廠模式來負責創建這些對象，調用者可以使用一部分資源也可以在基礎上私人訂制一套資源。

就拿昨天入群的小伙伴舉個栗子：他設計一個網頁播放器有四個按鈕：

我們不討論他的實現方式，我們按照工廠模式來簡單創建一個吧！

function wangyiMusicAction(action){var o = new Object;o.vender = '網易云音樂';o.playingMusic = 'see you again'switch (action){case 'last':o.information = {currentMusic:'Ich will',status:'200|404',message:'上一曲'}breakcase 'next':o.information = {currentMusic:'一人我編程累',status:'200|404',message:'下一曲'}breakcase 'play':o.information = {currentMusic:'see you again',status:'200|500',message:'播放'}breakcase 'mute':o.information = {currentMusic:'see you again',status:'200|500',message:'靜音'}break}return o;} var music = wangyiMusicAction('next') console.log('音樂提供商 : '+music.vender); console.log('正在播放 : '+music.playingMusic); console.log('執行動作 : ' +music.information.message); console.log('接口狀態 : ' +music.information.status); console.log('執行動作后歌曲 : ' +music.information.currentMusic);----------執行結果--------音樂提供商 : 網易云音樂 正在播放 : see you again 執行動作 : 下一曲 接口狀態 : 200|404 執行動作后歌曲 : 一人我編程累 復制代碼

這其實使我們經常使用的，不過這是面向過程的，不太符合我們的設計模式。我們用上篇學到的模式：對象

我們可以修改一下：

var WangyiMusicAction = function(action){this.vender = '網易云音樂';this.playingMusic = 'see you again'}WangyiMusicAction.prototype = {last : function() {this.information = {currentMusic:'Ich will',status:'200|404',message:'上一曲'}},next : function() {this.information = {currentMusic:'一人我編程累',status:'200|404',message:'下一曲'}},play : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'播放'}},mute : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'靜音'}}}var music = new WangyiMusicAction() music.next(); //執行下一曲動作 console.log('音樂提供商 : '+music.vender); console.log('正在播放 : '+music.playingMusic); console.log('執行動作 : ' +music.information.message); console.log('接口狀態 : ' +music.information.status); console.log('執行動作后歌曲 : ' +music.information.currentMusic); 音樂提供商 : 網易云音樂 正在播放 : see you again 執行動作 : 下一曲 接口狀態 : 200|400----------執行結果--------執行動作后歌曲 : 一人我編程累復制代碼

這樣就算是面向對象的了，雖然達到目的，但是上面所說的，但是這算是Music的網易云音樂實現版本、總不能再來一個QQMusic、XiaMiMusic吧？我們建立一個Factory工廠來管理所有的音樂：

var WangyiMusicAction = function(action){this.vender = '網易云音樂';this.playingMusic = 'see you again'}//為網易音樂提供共有方法 WangyiMusicAction.prototype = {last : function() {this.information = {currentMusic:'Ich will',status:'200|404',message:'上一曲'}},next : function() {this.information = {currentMusic:'一人我編程累',status:'200|404',message:'下一曲'}},play : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'播放'}},mute : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'靜音'}}}var QQMusicAction = function(action){this.vender = 'QQ音樂';this.playingMusic = '其實我不low'}//為QQ音樂提供共有方法 QQMusicAction.prototype = {last : function() {this.information = {currentMusic:'Ich will',status:'200|404',message:'上一曲'}},next : function() {this.information = {currentMusic:'網易才low',status:'200|404',message:'下一曲'}},play : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'播放'}},mute : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'靜音'}}} //音樂工廠 var MusicFactory = function(type){switch (type){case 'qq':return new QQMusicAction();case 'wangyi':return new WangyiMusicAction()} }var music = new MusicFactory('qq') music.next(); //執行下一曲動作 console.log('音樂提供商 : '+music.vender); console.log('正在播放 : '+music.playingMusic); console.log('執行動作 : ' +music.information.message); console.log('接口狀態 : ' +music.information.status); console.log('執行動作后歌曲 : ' +music.information.currentMusic);----------執行結果--------音樂提供商 : QQ音樂 正在播放 : 其實我不low 執行動作 : 下一曲 接口狀態 : 200|404 執行動作后歌曲 : 網易才low復制代碼

這樣調用者需要用音樂接口，只需要記住MusicFactory就可以了，MusicFactory就像一個大工廠，對于music可以返回他要的一切。

好，我們回過頭來看一下：

第一種方法:是創建一個新的對象 o 對他來增強 屬性 的功能來實現的. 第二種方法:是實例化對象來創建的。 第二種方法:如果他們繼承同一個父類 BaseMusic 那么他們父類的原型方法是可以和它們公用的! 第一種方法:我們內部 new 了一個新的個體，就不能與父類共用了.

具體哪種還是看你需求的，不過我更傾向第二種，因為他擴展性高，需求多的時候我們甚至可以將通用的抽離出來放到父類BaseMusic中。

在下面的繼承中我運用了類式繼承

ps:(大家可以看看構造函數繼承和組合繼承鏈接在最下面） 復制代碼 //基類（父類）music方法 var BaseMusic = function(){this.playingMusic = 'see you again' } //實現通用方法 BaseMusic.prototype = {last : function() {this.information = {status:'200|404',message:'上一曲'}},next : function() {this.information = {currentMusic:'一人我編程累',status:'200|404',message:'下一曲'}},play : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'播放'}},mute : function() {this.information = {currentMusic:'see you again',status:'200|500',message:'靜音'}} } //網易云的不同于父類的構造方法 var WangyiMusicAction = function(action){this.vender = '網易云音樂';} //這里通過prototype實現類繼承 WangyiMusicAction.prototype = new BaseMusic();//這些動作我都放在基類了，達到代碼復用的目的//QQ var QQMusicAction = function(action){this.vender = 'QQ音樂';this.playingMusic = '其實我不low'} QQMusicAction.prototype = new BaseMusic() //這些動作我都放在基類了，達到代碼復用的目的//音樂工廠 var MusicFactory = function(type){switch (type){case 'qq':return new QQMusicAction();case 'wangyi':return new WangyiMusicAction()} }var music = new MusicFactory('wangyi') music.next(); //執行下一曲動作 console.log('音樂提供商 : '+music.vender); console.log('正在播放 : '+music.playingMusic); console.log('執行動作 : ' +music.information.message); console.log('接口狀態 : ' +music.information.status); console.log('執行動作后歌曲 : ' +music.information.currentMusic);----------執行結果--------音樂提供商 : 網易云音樂 正在播放 : see you again 執行動作 : 下一曲 接口狀態 : 200|404 執行動作后歌曲 : 一人我編程累 復制代碼

這樣看起來是不是更好、更簡潔呢？

創建者模式

• 工廠模式職責：我不管你想干啥，我只返回給你一個你想要的對象
• 創建者模式職責：主要針對復雜業務的解耦，算是工廠的一種拆解、拼接。我可以將你的需求分解多個對象創建，更關心的是創建對象的過程。

不復雜不能突顯出他的魅力,舉個稍微復雜栗子：

我們公司是賣車的，用戶下單要買車，這個車呢：

品牌：邁巴赫、林肯、賓利、特斯拉[如果不選品牌，默認特斯拉] 顏色：赤橙黃綠青藍紫...[如果不選顏色，默認黃色] 動力：燃油、電力、混合動力[如果不選動力，默認電力] 購買人的一些備注信息[購買人可能會修改備注需要提供方法] 針對購買人選擇的車型返回對車型的簡單描述[描述可以修改]復制代碼

最終根據用戶選擇來生成一個訂單： 想下這用工廠模式是不是要寫很多的if else來返回這么一個Car的對象呢？

我們先將 車 購買人的動作 反饋 分解為三個對象再在最后進行拼接 ：

//創建一個汽車 var Car = function(param){this.color = param && param.color || 'yellow';this.brand = param && param.brand || 'Tesla';this.power = param && param.power || 'electric'; } //提供原型方法 Car.prototype = {getColor : function () {return this.color;},getBrand : function () {return this.brand;},getPower : function () {return this.power;} }//創建一個反饋 var FeedBack = function(brand){var that = this;(function(brand,that){switch (brand){case 'Tesla':// that.brand = brand;that.information = '特斯拉是好車'breakcase 'Rolls' :that.information = '勞斯來時是好車'}})(brand,that) }FeedBack.prototype.changeBrand = function (information) {this.information = information; }//創建一個顧客 var Client = function(name,message){this.name = name;this.message = message || '無留言'; } //顧客修改備注 Client.prototype.changeMessage = function(message){this.message = message; } //然后重點在這里！我們在這里將我們分解的拼接起來。 var Order = function(name){var object = new Car();object.client = new Client(name);object.feedBack = new FeedBack(object.brand);return object; }var orderCar = new Order('Vendar-MH'); console.log('The' + orderCar.client.name + '先生、下單一輛' + orderCar.color + '的' + orderCar.brand +' 留言內容 : ' +orderCar.client.message ); orderCar.client.changeMessage('請馬上電話聯系我') console.log('The' + orderCar.client.name + '先生、下單一輛' + orderCar.color + '的' + orderCar.brand +' 留言內容 : ' +orderCar.client.message );----------執行結果--------TheVendar-MH先生、下單一輛yellow的Tesla 留言內容 : 無留言 TheVendar-MH先生、下單一輛yellow的Tesla 留言內容 : 請馬上電話聯系我復制代碼

好了,就算是關于這個訂單的更加復雜的需求，或者修改需求，不管我們多少各功能在用，我們只要微微一笑，修改下prototype等實現就好了0.0

如果您覺得還算不錯可以關注我持續看我的文章，大概方向：前后端語言設計模式、如何設計好一款框架、源碼導讀、技術實踐。

• 青年才俊可以入群交流:147255248

總結

以上是生活随笔為你收集整理的JavaScript 设计模式 ： 巧用'工厂模式'和'创建者'模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。