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

kevin 發布于2019-08-23 16:50 / 2155人閱讀

摘要：期設計模式如何理解工廠模式定義創建對象的接口，讓子類決定實例化哪個類。適用場景需要根據不同參數產生不同實例，這些實例都有相同的行為這時候我們可以使用工廠模式，簡化實現的過程，同時也可以減少每種對象所需的代碼量。

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點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器代碼設計模式工廠模式工廠模式工廠方法模式抽象工廠模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103385.html

JS每日一題:設計模式-如何理解觀察者(發布訂閱)模式?

摘要：期設計模式如何理解觀察者發布訂閱模式定義觀察者模式又叫發布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期設計模式-如何理解觀察者(發布訂閱)模式? 定義: 觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一...

baishancloud 2019-08-23 16:53 評論0 收藏0
JS每日一題：函數式編程中代碼組合(compose)如何理解?

摘要：期函數式編程中代碼組合如何理解定義顧名思義，在函數式編程中，就是將幾個有特點的函數拼湊在一起，讓它們結合，產生一個嶄新的函數代碼理解一個將小寫轉大寫的函數一個在字符后加的函數將兩個函數組合起來這里假設我們實現了每日一題每日一題顯示結果里上面 20190315期函數式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數式編程中，Compose就是將幾個有特點的函數拼湊在...

Kaede 2019-08-23 16:08 評論0 收藏0
JS每日一題:設計模式-如何理解職責鏈模式?

摘要：提交請求的對象并不明確知道哪一個對象將會處理它也就是該請求有一個隱式的接受者。 20190412期設計模式-如何理解職責鏈模式? 定義: 使多個對象都有機會處理請求，從而避免請求的發送者和接收者之間的耦合關系，將這些對象連成一條鏈，并沿著這條鏈傳遞該請求，直到有一個對象處理它為止也就是說，請求以后，從第一個對象開始，鏈中收到請求的對象要么親自處理它，要么轉發給鏈中的下一個候選者。提...

lifesimple 2019-08-23 16:56 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 評論0 收藏0