JavaScript設計模式之原廠模式

標籤：倍增   src   調用   節點   訂單   選擇   一個   使用   邏輯   

原廠模式是一種最常用的執行個體化對象模式，是用Factory 方法代替new操作的一種模式。在原廠模式中，我們在建立對象時不會對用戶端暴露建立邏輯，並且是通過使用一個共同的介面來指向新建立的對象。因為原廠模式就相當於建立執行個體對象的new，在JavaScript中通常會使用new關鍵字來執行個體化對象，如A： a=new A()， 原廠模式也是用來建立執行個體對象的，所以以後new時就要多個心眼，是否可以考慮使用原廠模式，雖然這樣做，可能多做一些工作，但會給你系統帶來更大的可擴充性和盡量少的修改量。

 

設計意圖：定義一個建立對象的介面，讓其子類自己決定執行個體化哪一個工廠類，原廠模式使其建立過程延遲到子類進行。

 

主要解決的問題：主要解決介面選擇的問題。

 

使用情境：我們明確地計劃不同條件下建立不同執行個體時。

 

舉個現實中的例子來理解原廠模式：現在有一個產生車輛的公司，生產的產品有單車、>機車、電動車三種。市場的需求在不斷的變化，工廠是無法準確的確定當下市場需要多少的單車、>機車、電動車。如果某種車輛生產的太多，就會因為銷售不出去而造成庫存積壓嚴重的問題。所以工廠的領導會議決定：往後自由在接收到車輛的具體訂單時再生產具體的車輛，也就是說，如果接到的是單車的訂單就生產單車，接到>機車訂單就生產>機車，接到電動車訂單就生產電動車。

 

最簡單的原廠模式程式執行個體：

var Car = (function(){                    var Car = function(model, year, miles){        this.model = model;        this.year = year;        this.miles = miles;    };                    return function(model, year, miles){        return new Car(model, year, miles);    };                })();            var dika = new Car(‘Dika‘, 2008, 20000);

 

這是最簡單的原廠模式，只用於建立一種執行個體對象。

 

再來看看複雜點的執行個體：

//工廠對象var Factory = (function(){                    //工廠生產管理對象    var productManager = {};                    //生產單車    productManager.createBicycle = function(){        this.model = "Bicycle";        console.log("product Bicycle!");    };                    //生產>機車    productManager.createMoto = function(){        this.model = "Moto";        console.log("product Moto!");    };                    //生產電動車    productManager.createElectrocar= function(){        this.model = "Electrocar";        console.log("product Electrocar!");    };                    //生產函數    productManager.create = function(type){        return new productManager[type];    };                    return {        productManager: productManager    }                })();var tom = Factory.productManager.create("createMoto");

 

接下來我們再看一個在網頁中使用的一個執行個體：假如我們想在網頁面裡插入一些元素，而這些元素類型不固定，可能是圖片，也有可能是串連，甚至可能是文本，根據原廠模式的定義，我們需要定義工廠類和相應的子類：

var page = (function(){                    var dom = {};                    //子類1：處理文本    dom.Text = function(){        this.insert = function(where, text){            var txt = document.createTextNode(text);            where.appendChild(txt);        }    };                    //子類2：處理連結    dom.Link = function(){        this.insert = function(where, url){            var link = document.createElement("a");            link.href = url;            link.appendChild(document.createTextNode(url));            where.appendChild(link);        }    };                    //子類3：處理圖片    dom.Image = function () {        this.insert = function (where, url) {            var img = document.createElement(‘img‘);            img.src = url;            where.appendChild(img);        };    };                    //建立函數    dom.create = function(type){        return new dom[type];    };                    return {        dom: dom    }                })();            var t = page.dom.create(‘Text‘);t.insert(document.body, "建立文本節點");

 

原廠模式的優缺點：

優點： 1、一個調用者想建立一個對象，只要知道其名稱就可以了。 2、擴充性高，如果想增加一個產品，只要擴充一個工廠類就可以。 3、屏蔽產品的具體實現，調用者只關心產品的介面。

缺點：每次增加一個產品時，都需要增加一個具體類和對象實現工廠，使得系統中類的個數成倍增加，在一定程度上增加了系統的複雜度，同時也增加了系統具體類的依賴。這並不是什麼好事。

 

JavaScript設計模式之原廠模式