成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

kevin / 2211人閱讀

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

20190408期

設(shè)計模式-如何理解工廠模式?

定義: 創(chuàng)建對象的接口，讓子類決定實例化哪個類。工廠方法將類的實例化延遲到子類,而子類可以重寫接口方法以便創(chuàng)建的時候指定自己的對象類型。
適用場景

需要根據(jù)不同參數(shù)產(chǎn)生不同實例，這些實例都有相同的行為,這時候我們可以使用工廠模式，簡化實現(xiàn)的過程，同時也可以減少每種對象所需的代碼量。工廠模式有利于消除對象間的耦合，提供更大的靈活性

代碼理解:

// 下方就是一個典型的工廠模式
// 首先創(chuàng)建對象的接口
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");

如果還不理解的話，那我們就再詳細(xì)一點咯，假如我們想在網(wǎng)頁面里插入一些元素，而這些元素類型不固定，可能是圖片，也有可能是連接，甚至可能是文本，根據(jù)工廠模式的定義，我們需要定義工廠類和相應(yīng)的子類，我們先來定義子類的具體實現(xiàn)（也就是子函數(shù)）

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

//子函數(shù)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);
    };
};

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

那么我們?nèi)绾味x工廠處理函數(shù)呢？其實很簡單：

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中的$()其實就是一個工廠函數(shù)，它根據(jù)傳入?yún)?shù)的不同創(chuàng)建元素或者去尋找上下文中的元素，創(chuàng)建成相應(yīng)的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 );
};
總結(jié)

優(yōu)點

工廠類含有必要的判斷邏輯, 實現(xiàn)了對責(zé)任的分割，它提供了專門的工廠類用于創(chuàng)建對象

用戶只需要關(guān)心所需產(chǎn)品對應(yīng)的工廠，無須關(guān)心創(chuàng)建細(xì)節(jié)

在系統(tǒng)中加入新產(chǎn)品時，無須修改抽象工廠和抽象產(chǎn)品提供的接口,符合“開閉原則”

缺點

添加新產(chǎn)品時，需要編寫新的具體產(chǎn)品類,一定程度上增加了系統(tǒng)的復(fù)雜度

考慮到系統(tǒng)的可擴(kuò)展性，需要引入抽象層，在客戶端代碼中均使用抽象層進(jìn)行定義，增加了系統(tǒng)的抽象性和理解難度

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103385.html

相關(guān)文章

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

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

    baishancloud 評論0 收藏0

  • JS每日一題：函數(shù)式編程中代碼組合(compose)如何理解?

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

    Kaede 評論0 收藏0

  • JS每日一題:設(shè)計模式-如何理解職責(zé)鏈模式?

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

    lifesimple 評論0 收藏0

  • JS每日一題：如何理解es6中的Proxy？

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

    tinysun1234 評論0 收藏0

  • JS每日一題：如何理解es6中的Proxy？

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

    PumpkinDylan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<