Javascript設(shè)計模式-工廠模式

feng409 發(fā)布于2019-08-22 10:50 / 1889人閱讀

摘要：設(shè)計模式工廠模式最近閱讀了幾本設(shè)計模式方面的書籍學(xué)習(xí)之余整理下來方便以后的歸納和梳理設(shè)計模式工廠模式創(chuàng)造工廠模式是一種創(chuàng)建性模式也就是一種創(chuàng)建對象的最佳實踐首先我們需要理解為什么我們需要工廠模式想象一個場景如果你要求去買一些東西板燒雞腿

Javascript設(shè)計模式-工廠模式

最近閱讀了幾本設(shè)計模式方面的書籍,學(xué)習(xí)之余整理下來,方便以后的歸納和梳理

設(shè)計模式-工廠模式

創(chuàng)造工廠模式是一種創(chuàng)建性模式,也就是一種創(chuàng)建對象的最佳實踐.首先我們需要理解:

為什么我們需要工廠模式?

想象一個場景:如果你要求去買一些東西:板燒雞腿漢堡,可樂和薯條,那么人們會非常自然的跑去麥當(dāng)勞去購買對吧.

為什么我們會想到去麥當(dāng)勞呢?因為這些東西都是一類食物,然后麥當(dāng)勞作為一個"工廠",可以一條龍的提供給消費者,如果沒有麥當(dāng)勞,那么我們需要分別去可樂,薯條和板燒雞腿漢堡的店面去分別買這些食物,那么購買效率會很低.所以可以說麥當(dāng)勞就是一個銷售食物的工廠模式.

所以我們可以這樣理解工廠模式,把相關(guān)的多個類(薯條,可樂等)提供一個統(tǒng)一入口的一個模式,讓你從一個入口就可以獲得多個類,提高工作效率.

但是對于工廠模式也會有三種類型的實現(xiàn)方式,分別是:簡單工廠模式,工廠方法模式和抽象工廠模式.它們分別是在各自基礎(chǔ)上有一定的改進(jìn).

簡單工廠模式

也被叫做靜態(tài)工廠模式(Simple Factory Patter),主要用于創(chuàng)建同一類的對象.

適用情況:如果被要求寫一些球類的實現(xiàn),那么一般情況的話我們會這樣實現(xiàn):

var Football = function(){
    this.name = "football";
    ....
}
var Basketball = function(){
    this.name = "basketball";
    ....
}

這種寫法有一些缺陷:返回了多個類,不便于他人使用.因此我們考慮把這些類似的類封裝到一個工廠里面,也就有了我們的簡單工廠模式:

var BallFactory;
!(function(){
    BallFactory = function(type,cfg){
        var Football = function(cfg){
            this.name = "football";
            console.log(this.name + " in the prototype");
        };
        Football.prototype = {
            call:function(){console.log(this.name)},
            sell:function(){}
        };
        var Basketball = function(cfg) {
            this.name = "basketball";
            console.log(this.name);
        };

        var cfg = cfg ||{};
        switch(type){
            case "football":
                return new Football(cfg);
                break;
            case "basketball":
                return new Basketball(cfg);
                break;
        }
    };
})();

var aFootball = BallFactory("football");
aFootball.call();

因此使用BallFactory把這些內(nèi)容包裹起來給其他人使用就會避免返回了多個類的問題,所以這就是簡單工廠模式想解決的問題:
統(tǒng)一創(chuàng)建的入口.

當(dāng)然在實際的使用過程中,我們會使用一些其它技巧:

如果工廠的產(chǎn)品中有很多重復(fù)部分,那么我們需要把重復(fù)的部分抽象出來成為共同的部分,不同的部分放入switch里面:

var GetChildren = function(cfg){
    cfg = cfg||{};
    this.name = cfg.name;
    this.height = cfg.height;
    this.speak = function(){};
    
    //抽離出不同的部分
    switch(cfg.gender){
        case "boy":
            this.gender = cfg.gender;
            this.moustouch = ....
            .....; //特有部分
            break; 
        case "girl":
            this.gender = cfg.gender;
            .......
            break;
    }
    return this;
}
var aBoy = GetChildren({.....});

工廠方法模式

在簡單工廠模式的基礎(chǔ)上,我們已經(jīng)解決了入口不統(tǒng)一的問題,但是還有一個問題沒有解決:

加入一個新的類需要修改多部分:首先我們需要在BallFactory工廠內(nèi)部加入如何實現(xiàn),然后加到switch部分;所以這是一次修改的需求,我們需要修改多個地方.

那么我們看能不能嘗試更抽象一點,盡可能減少需要修改的地方;

var BallFactory = function(type,cfg){
    this.name = cfg.name; //共同的部分放在這里
    return this[type](cfg);
};

BallFactory.prototype = {
    football:function(cfg){
        console.log("這里加入和football相關(guān)的獨特內(nèi)容" +this.name);
    },
    basketball:function(cfg) {
        console.log("這里加入和basketball相關(guān)的獨特內(nèi)容" +this.name);
    }
};
var aBall = new BallFactory("football",{name:"football"}); //football in the prototype

所以這里加入了一個return this[type](cfg)的方法自動代替了之前的switch的方法.以后需要加入內(nèi)容只需要修改BallFactory的prototype就可以了.

當(dāng)然我們還可以添加一種安全模式來解決如果不在構(gòu)造函數(shù)前面加上new的話,會報錯的問題.解決的思路其實是把new封裝在構(gòu)造函數(shù)之內(nèi):

var BallFactory = function(type,cfg){
    if(!(this instanceof BallFactory)){
        return new BallFactory(type,cfg); //多一行判斷即:如果沒有帶new,我自己幫你new一個返回就好;
    }
    this.name = cfg.name;
    return this[type](cfg);
};

var aBall = BallFactory("football",{name:"football"}); //這里如果掉了new也會正常執(zhí)行;

所以,我們可以看到的是,我們使用簡單工廠模式解決了入口不統(tǒng)一的問題,然后使用工廠模式解決了修改地點不統(tǒng)一的問題

抽象工廠模式

一般來說,抽象工廠在大型項目的使用更多,大概的思路是在父類里面設(shè)計好接口(沒有具體實現(xiàn)),具體的實現(xiàn)等到了子類再重寫.

這里借用一個張容銘的的一個例子:

var Car = function(){};
Car.prototype = {
    getPrice:function(){ throw new Error("抽象方法不能調(diào)用")},
    getSpeed:function(){ throw new Error("抽象方法不能調(diào)用")}
};
//這里使用Object.create()繼承,子類到父類中會多一個中間過渡函數(shù)Temp(){};防止在子類的prototype覆蓋父類;可見參考資料
aBMW = Object.create(Car.prototype);
    
aBMW.getPrice();  // 抽象方法不能調(diào)用
aBMW.getPrice = function(){
    console.log("I am getting price");
};
aBMW.getPrice(); //I am getting price

父類定義好接口,具體實現(xiàn)延遲到子類才實現(xiàn).

所以總結(jié)來說:

簡單工廠模式解決了入口不統(tǒng)一的問題,

工廠模式解決了修改地點不統(tǒng)一的問題,

抽象工廠模式解決了子類實現(xiàn)不規(guī)范的問題

參考資料

Javascript設(shè)計模式張容銘

深入理解JavaScript系列（28）：設(shè)計模式之工廠模式

工廠模式

Object.create()使用方式

GPU云服務(wù)器云服務(wù)器代碼設(shè)計模式工廠模式工廠模式工廠方法模式抽象工廠模式

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

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

發(fā)表評論

登陸后可評論

0條評論

feng409

男|高級講師

我要關(guān)注我要私信

TA的文章

pycharm怎么安裝tensorflow

閱讀 2610·2023-04-25 17:27
移動端適配方案

閱讀 1909·2019-08-30 15:54
關(guān)于css3的陰影遮蓋問題的小研究

閱讀 2439·2019-08-30 13:06
css3的3D

閱讀 3036·2019-08-30 11:04
JS基礎(chǔ)入門篇（十二）—對象

閱讀 821·2019-08-29 15:30
兩個常規(guī)的頁面布局方式

閱讀 789·2019-08-29 15:16
Proxy 的巧用

閱讀 1820·2019-08-26 10:10
2019干掉手機uc瀏覽器的底部強制廣告

閱讀 3658·2019-08-23 17:02

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript設(shè)計模式-工廠模式

相關(guān)文章

javascript實現(xiàn)簡單工廠模式

*JavaScript**設(shè)計*模式-工廠方法模式

*JavaScript**設(shè)計*模式系列一：工廠模式

JavaScript面向?qū)ο驩OM 2（JavaScript 創(chuàng)建對象的工廠模式和構(gòu)造函數(shù)模式）

JavaScript面向?qū)ο驩OM 2（JavaScript 創(chuàng)建對象的工廠模式和構(gòu)造函數(shù)模式）

發(fā)表評論

0條評論

feng409

男|高級講師

TA的文章

pycharm怎么安裝tensorflow

移動端適配方案

關(guān)于css3的陰影遮蓋問題的小研究

css3的3D

JS基礎(chǔ)入門篇（十二）—對象

兩個常規(guī)的頁面布局方式

Proxy 的巧用

2019干掉手機uc瀏覽器的底部強制廣告

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Javascript設(shè)計模式-工廠模式

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！