首頁  >  文章  >  web前端  >  深入理解JavaScript系列(28):設計模式之工廠模式詳解_javascript技巧

深入理解JavaScript系列(28):設計模式之工廠模式詳解_javascript技巧

WBOY
WBOY原創
2016-05-16 16:11:13999瀏覽

介紹

與創建型模式類似,工廠模式創建物件(視為工廠裡的產品)時無需指定創建物件的特定類別。

工廠模式定義一個用來建立物件的接口,這個接口由子類別決定實例化哪一個類別。此模式使一個類別的實例化延遲到了子類別。而子類別可以重寫介面方法以便在創建的時候指定自己的物件類型。

這個模式十分有用,尤其是創建物件的流程賦值的時候,例如依賴很多設定檔等。並且,你會經常在程式裡看到工廠方法,用來讓子類別類別定義需要建立的物件類型。

正文

下面這個例子中,是應用了工廠方法對第26章建構函數模式代碼的改進版本:

複製程式碼 程式碼如下:

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 tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

不好理解的話,我們再給一個例子:

複製程式碼 程式碼如下:

var productManager = {};

productManager.createProductA = function () {
    console.log('ProductA');
}

productManager.createProductB = function () {
    console.log('ProductB');
}
       
productManager.factory = function (typeType) {
    return new productManager[typeType];
}

productManager.factory("createProductA");

如果還不理解的話,那我們就再詳細一點咯,假如我們想在網頁面裡插入一些元素,而這些元素類型不固定,可能是圖片,也有可能是連接,甚至可能是文本,根據工廠模式的定義,我們需要定義工廠類別和對應的子類,我們先定義子類別的具體實作(也就是子函數):

複製程式碼 程式碼如下:

var page = page || {};
page.dom = page.dom || {};
//子函數1:處理文字
page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};

//子函數2:處理連結
page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};

//子函數3:處理圖片
page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};

那我們要如何定義工廠處理函數呢?其實很簡單:

複製程式碼 程式碼如下:

page.dom.factory = function (type) {
    return new page.dom[type];
}

使用方式如下:
複製程式碼 程式碼如下:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

至此,工廠模式的介紹相信大家都已經了然於心了,我就不再多敘述了。

總結

何時使用工廠模式

以下幾種情境下工廠模式特別有用:

1.物件的建構十分複雜
2.需要依賴具體環境創建不同實例
3.處理大量具有相同屬性的小物件

什麼時候不該用工廠模式

不濫用運用工廠模式,有時候只是給程式碼增加了不必要的複雜度,同時使得測試難以運作下去。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn