04.Javascript設計模式之簡單工廠—-SimpleFacotry

 

 04.Javascript設計模式之簡單工廠----SimpleFacotry

簡單原廠模式的實質是由一個工廠類根據傳入的參數，動態決定應該建立哪一個產品類的執行個體。本文將用原生的Javascript語言來類比簡單工廠的設計模式。

問題的引入

以單車為例，一輛單車必經如下的四個階段：組裝、清洗、騎、維修，可以用下面的這個介面來表示：

var Bicycle = new Interface("Bicycle",["assemble","wash","ride","repaire"]);

也就是說，所有的單車都必須經曆這四個階段，意即所有的單車類，都是介面Bicycle的實作類別，如Speedster牌的單車，類表示時，Speedster中必須包含如上幾口中的四個方法，代碼錶示為：

var Speedster = function(){};Speedster.prototype = {    assemble : function(){},    wash : function(){},    ride : function(){},    repaire : function(){}};

其中隱藏的代碼實現為：

var Speedster = function(){};//下面的這句代碼是必須的implements(Speedster,Bicycle);//implements方法請參見前序章節“JavaScript之介面----interface”

假如你想開幾個單車商店，每個商店都有幾種型號（Speedster、Lowrider、ComfortCruiser）的單車出售，那麼這個單車商店該怎樣來類比呢？

通常的實現模式

var BicycleShop = function(){};BicycleShop.prototype = {    sellBicycle : function(model){        var bicycle;        //生產單車        switch(model){            case "speedster":                bicycle = new Speedster();                break;            case "lowrider":                bicycle = new Lowrider();                break;            case "comfort cruiser":            default :                bicycle = new ComfortCruiser();        }        //單車組裝        bicycle.assemble();        //單車清洗        bicycle.wash();        return bicycle;    }};//出售單車var bShop = new BicycleShop();var newBicycle = bShop.sellBicycle("lowrider");

用上面的方式，我們就成功的出售了一輛“lowrider”牌的單車。sellBicycle方法可以根據所要求的單車型號用switch來建立一個單車執行個體。

簡單原廠模式

但是問題來了，如果你想在供貨目錄中假如一款新車該怎麼辦呢？你為了滿足這個要求，不得不去改動BicycleShop的代碼，即使其內部的實現邏
輯和實際功能完全沒有變（依舊是根據使用者的需求，建立一輛單車、組裝、清洗後，再交給使用者）。考慮到這一點，我們需要對這個sellBicycle方法
做一個升級，把其中專門用於生產單車功能的部分代碼交給一個簡單工廠來完成，該工廠只負責建立使用者所需的單車，這就是一個單車工廠，代碼類比為：

var BicycleFactory = {    createBicycle : function(model){        var bicycle;        //生產單車        switch(model){            case "speedster":                bicycle = new Speedster();                break;            case "lowrider":                bicycle = new Lowrider();                break;            case "comfort cruiser":            default :                bicycle = new ComfortCruiser();        }        return bicycle;    }};

非常容易的可以從代碼看出，這個單車工廠只做一件事，就是根據使用者的需求，建立單車。

這樣一來，我們的單車商店就可以類比成這樣了：

var BicycleShop = function(){};BicycleShop.prototype = {    sellBicycle : function(model){        //這裡是改動之處        var bicycle = BicycleFactory.createBicycle(model);        //下面的代碼仍然沒有變        //單車組裝        bicycle.assemble();        //單車清洗        bicycle.wash();        return bicycle;    }};//出售單車var bShop = new BicycleShop();var newBicycle = bShop.sellBicycle("lowrider");

這樣一來，生產單車的工作就交給了專門的工廠來完成了，就算這個時候需要一輛新型號的單車，比如“Alien”牌的，那麼只需要在BicycleFactory中增加兩行代碼即可：

var BicycleFactory = {    createBicycle : function(model){        var bicycle;        //生產單車        switch(model){            case "speedster":                bicycle = new Speedster();                break;            case "lowrider":                bicycle = new Lowrider();                break;            case "Alien":   //這裡是新添加的單車型號                bicycle = new Alien();                break;            case "comfort cruiser":            default :                bicycle = new ComfortCruiser();        }        return bicycle;    }};

這樣的修改，對單車商店來說，是沒有任何影響的，非常友好的將產品提供給了使用者。

這是一個非常典型的簡單工廠設計模式的例子。主要參考文獻：《Javascript設計模式》 Ross Harmes,Dustin Diaz

若有類比不當或闡述不清之處，還請見諒，謝謝！