1. 程式人生 > >JavaScript設計模式之工廠模式

JavaScript設計模式之工廠模式

無法 生產 什麽 接口 child ear 具體實現 bsp 常用

工廠模式是一種最常用的實例化對象模式,是用工廠方法代替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設計模式之工廠模式