JS每日一題:設計模式-如何理解工廠模式?

20190408期

設計模式-如何理解工廠模式?

定義: 建立對象的接口，讓子類決定實例化哪一個類。工廠方法將類的實例化延遲到子類,而子類能夠重寫接口方法以便建立的時候指定本身的對象類型。

適用場景

須要根據不一樣參數產生不一樣實例，這些實例都有相同的行爲,這時候咱們可使用工廠模式，簡化實現的過程，同時也能夠減小每種對象所需的代碼量。工廠模式有利於消除對象間的耦合，提供更大的靈活性

代碼理解:

// 下方就是一個典型的工廠模式
// 首先建立對象的接口
const productManager = {};

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

productManager.createProductB = function () {
    console.log('ProductB');
}
        
productManager.factory = function (type) {
    // 工廠方法將類的實例化延遲到子類
    return new productManager[type];
}

// 讓子類決定實例化哪一個類
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);

熟悉的jquery

jQuery中的$()其實就是一個工廠函數，它根據傳入參數的不一樣建立元素或者去尋找上下文中的元素，建立成相應的jQuery對象

// https://github.com/jquery/jquery/blob/master/src/core/init.js

init = jQuery.fn.init = function( selector, context, root ) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Method init() accepts an alternate rootjQuery
    // so migrate can support jQuery.sub (gh-2101)
    root = root || rootjQuery;

    // Handle HTML strings
    if ( typeof selector === "string" ) {
            
        //...

    // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {
        
        //....

    // HANDLE: $(function)
    // Shortcut for document ready
    } else if ( jQuery.isFunction( selector ) ) {
        //....
    }

    return jQuery.makeArray( selector, this );
};

總結

優勢

• 工廠類含有必要的判斷邏輯, 實現了對責任的分割，它提供了專門的工廠類用於建立對象
• 用戶只須要關心所需產品對應的工廠，無須關心建立細節
• 在系統中加入新產品時，無須修改抽象工廠和抽象產品提供的接口,符合「開閉原則」

缺點

• 添加新產品時，須要編寫新的具體產品類,必定程度上增長了系統的複雜度
• 考慮到系統的可擴展性，須要引入抽象層，在客戶端代碼中均使用抽象層進行定義，增長了系統的抽象性和理解難度

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題