Javascript設計模式之原廠模式

標籤：理念   log   tor   end   動態   ext   擷取   需求   使用   

設計模式並不是某一種語言所特有的，而是一種設計理念，現在學習Javascript的設計模式相關知識點。

原廠模式

原廠模式設計目標是：根據不同的需求建立執行個體化對象。我們將通過一個特定的需求來逐漸深入的講解工程模式的用法。

我們需要達到的一個需求是，做一個音樂播放器，這個播放器有四個按鈕，分別是上一首、下一首、播放暫停、靜音。

 

針對上面的需求，我們先按照最簡單的原廠模式寫一個方法。

 1 <script> 2     function WangyiMusicAction(action) { 3         var obj = new Object; 4         obj.vender = "網易雲音樂"; 5         obj.playingMusic = "see you again"; 6  7         switch (action) { 8             case "last": 9                 obj.information = { currentMusic: "小幸運", status: "200|404", message: "上一曲" };10                 break;11             case "next":12                 obj.information = { currentMusic: "野子", status: "200|404", message: "下一曲" };13                 break;14             case "play":15                 obj.information = { currentMusic: "see you again", status: "200|500", message: "播放" };16                 break;17             case "mute":18                 obj.information = { currentMusic: "see you again", status: "200|500", message: "靜音" };19                 break;20         }21 22         return obj;23     };24 25     /***下面是調用測試代碼***/26     var music = new WangyiMusicAction("next");27     console.log("音樂供應商：" + music.vender); // 網易雲音樂28     console.log("現正播放：" + music.playingMusic); // see you again29     console.log("執行動作：" + music.information.message); // 下一曲30     console.log("介面狀態：" + music.information.status); // 200|40431     console.log("執行動作後歌曲：" + music.information.currentMusic); //野子32 33 </script>

通過給action傳遞不同的參數，可以擷取不同的播放器狀態。

 

物件導向理念

但是上述的方法並沒有用到物件導向的理念，我們使用物件導向的思維重新修改上面的方法。

 1 <script> 2     var WangyiMusicAction = function () { 3         this.vender = "網易雲音樂"; 4         this.playingMusic = "see you again"; 5     }; 6  7     //擴充其prototype屬性 8     WangyiMusicAction.prototype = { 9         last: function () {10             this.information = { currentMusic: "小幸運", status: "200|404", message: "上一曲" };11         },12         next: function () {13             this.information = { currentMusic: "野子", status: "200|404", message: "下一曲" };14         },15         play: function () {16             this.information = { currentMusic: "see you again", status: "200|500", message: "播放" };17         },18         mute: function () {19             this.information = { currentMusic: "see you again", status: "200|500", message: "靜音" };20         }21     };22 23 24     /***下面是調用測試代碼***/25     var music = new WangyiMusicAction();26     console.log("音樂供應商：" + music.vender); // 網易雲音樂27     console.log("現正播放：" + music.playingMusic); // see you again28 29     music.next(); // 執行下一曲動作30     console.log("執行動作：" + music.information.message); // 下一曲31     console.log("介面狀態：" + music.information.status); // 200|40432     console.log("執行動作後歌曲：" + music.information.currentMusic); //野子33 34 </script>

在上述物件導向的原廠模式中，建立一個WangyiMusicAction對象，然後擴充其prototype屬性，這樣每個執行個體都會有自己的方法。

 

改進原廠模式

上面的原廠模式中，只能產生WangyiMusicAction的對象，如果我還要產生一個QQMusic和BaiduMusic，XiamiMusic，只有每個music都得寫一遍方法，這是不值得推薦的。

我們可以通過一個Factory來動態建立各種類型的Music，首先是WangyiMusicAction。

 

最佳化原廠模式

但是在上面的原廠模式中，我們發現對於不同音樂供應商共用的屬性可以封裝成一個對象，用作父類繼承。

1，定義父類

2，繼承
通過修改prototype屬性實現繼承。

3，建立Factory工廠

建立工廠動態產生WangyiMusic或者QQMusic，然後產生一個QQMusic執行個體，並調用相應的方法。

 

 1 <script> 2     //基類（父類）Music方法 3     var BaseMusic = function () { 4         this.playingMusic = "see you again"; 5         this.information = { 6             currentMusic: "", 7             status: "", 8             message: "" 9         };10     };11 12     //實現通用方法13     BaseMusic.prototype = {14         last: function () {15             this.information.currentMusic = "小幸運";16             this.information.status = "200|404";17             this.information.message = "上一曲";18         },19         next: function () {20             this.information.currentMusic = "野子";21             this.information.status = "200|404";22             this.information.message = "下一曲";23         },24         play: function () {25             this.information.currentMusic = "see you again";26             this.information.status = "200|500";27             this.information.message = "播放";28         },29         mute: function () {30             this.information.currentMusic = "see you again";31             this.information.status = "200|500";32             this.information.message = "靜音";33         }34     };35 36 37     //網易雲音樂不同於父類的構造方法38     var WangyiMusicAction = function (action) {39         this.vender = "網易雲音樂";40     };41     //通過prototype實作類別繼承42     WangyiMusicAction.prototype = new BaseMusic(); //將動作放在基類，到達代碼複用的目的43 44     //QQ音樂不同於父類的構造方法45     var QQMusicAction = function (action) {46         this.vender = "QQ音樂";47     };48     //通過prototype實作類別繼承49     QQMusicAction.prototype = new BaseMusic(); //將動作放在基類，到達代碼複用的目的50 51 52     //音樂工廠53     var MusicFactory = function (type) {54         switch (type) {55             case "wangyi":56                 return new WangyiMusicAction();57             case "qq":58                 return new QQMusicAction();59         }60     };61 62     /***下面是調用測試代碼***/63     var music = new MusicFactory("wangyi");64     console.log("音樂供應商：" + music.vender);65     console.log("現正播放：" + music.playingMusic);66 67     music.next(); // 執行下一曲動作68     console.log("執行動作：" + music.information.message);69     console.log("介面狀態：" + music.information.status);70     console.log("執行動作後歌曲：" + music.information.currentMusic);71 72 </script>

通過上述的繼承父類方案，可以最佳化代碼結構，原廠模式也使用的更加簡潔。

 

Javascript設計模式之原廠模式