JS設計模式之工廠模式詳解

這次帶給大家JS設計模式之工廠模式詳解，使用JS工廠模式的注意事項有哪些，下面就是實戰案例，一起來看一下。

概念：工廠模式定義了一個用於創建物件的接口，這個接口由子類決定實例化哪一個類，該模式是一個類的實例化延遲到了子類。而子類別可以重寫介面的方法以便在創建的時候指定自己的物件類型（抽象工廠）

作用和注意事項 
作用：物件建構十分複雜。

需要依賴特定的環境來建立不同的實例

處理大量的具有相同屬性的小物件

注意事項：不能濫用工廠，有時只是給程式碼增加複雜度

使用方法 
我們透過一個例子來示範這個問題，就像我們這個工廠裡要生產不同類型的產品一樣，我們每個類型都寫在一個方法，這樣我們在生產的時候直接呼叫這個辦法就行了。 那請看這段程式碼：

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);

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS設計模式之建造者模式詳解

JS的設計模式之建構子模式詳解

js設計模式之-單例模式的使用

以上是JS設計模式之工廠模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！