設(shè)計(jì)模式——工廠模式

Moxmi 發(fā)布于2019-08-20 10:24 / 2535人閱讀

摘要：簡單工廠模式創(chuàng)建單一的對象示例描述工廠模式主要是為了創(chuàng)建對象實(shí)例或者類簇抽象工廠關(guān)心的是最終產(chǎn)出創(chuàng)建的對象而不關(guān)心創(chuàng)建的過程在出現(xiàn)多個(gè)類的時(shí)候每次創(chuàng)建需要找到對應(yīng)的類往往比較麻煩這時(shí)候通常使用一個(gè)函數(shù)進(jìn)行封裝來創(chuàng)建所需要的對象這樣就無需關(guān)注

簡單工廠模式(創(chuàng)建單一的對象) 示例1 描述

工廠模式主要是為了創(chuàng)建對象實(shí)例或者類簇(抽象工廠), 關(guān)心的是最終產(chǎn)出(創(chuàng)建)的對象, 而不關(guān)心創(chuàng)建的過程.

在出現(xiàn)多個(gè)類的時(shí)候, 每次創(chuàng)建需要找到對應(yīng)的類往往比較麻煩, 這時(shí)候通常使用一個(gè)函數(shù)進(jìn)行封裝來創(chuàng)建所需要的對象,
這樣就無需關(guān)注創(chuàng)建這些對象到底依賴哪些基類了, 只要知道有這個(gè)函數(shù)就可以了, 通常這個(gè)函數(shù)被稱為工廠函數(shù),
這種模式叫簡單工廠模式

案例

假設(shè)一體育商品店賣器材, 里面有很多體育商品, 及其相關(guān)介紹. 當(dāng)你來到體育用品店買一個(gè)籃球及相關(guān)介紹時(shí),
你只需要問售貨員, 她會幫你找到你所需要的東西.

實(shí)現(xiàn)

// 籃球基類
var Basketball = function() {
    this.intro = "籃球盛行于美國";
}
Basketball.prototype = function() {
    getMember: function() {
        console.log("每個(gè)隊(duì)伍需要5名隊(duì)員");
    },
    getBallSize: function() {
        console.log("籃球很大");
    }
}

// 足球基類
var Football = function() {
    this.intro = "足球在世界范圍內(nèi)盛行";
}
Football.prototype = function() {
    getMember: function() {
        console.log("每個(gè)隊(duì)伍需要11名隊(duì)員");
    },
    getBallSize: function() {
        console.log("足球很大");
    }
}

// 網(wǎng)球基類
var Tennis = function() {
    this.intro = "每年有很多網(wǎng)球系列賽";
}
Tennis.prototype = function() {
    getMember: function() {
        console.log("每個(gè)隊(duì)伍需要1名隊(duì)員");
    },
    getBallSize: function() {
        console.log("網(wǎng)球很小");
    }
}

// 運(yùn)動(dòng)工廠(這邊相當(dāng)于咨詢體育器材店的售貨員, 告訴她你想要買什么體育用品)
var SportFactory = function(name) {
    switch(name) {
        case "basketball":
            return new Basketball();
        case "football":
            return new Football();
        case "tennis":
            return new Tennis();
    }
}

var ball = new SportFactory("tennis");
console.log(ball.intro)            // 每年有很多網(wǎng)球系列賽
console.log(ball.getMember());    // 每個(gè)隊(duì)伍需要1名隊(duì)員

示例2 描述

簡單工廠模式的理念就是創(chuàng)建對象, 而除此之外, 簡單工廠模式還可以創(chuàng)建相似對象. 在創(chuàng)建多個(gè)類的時(shí)候, 假設(shè)每個(gè)類都有很多相似的地方, 比如在多種彈出框上都有關(guān)閉按鈕, 都有提示文案等. 可以通過將這些相似的東西提取, 不相似針對性處理即可.

案例

假設(shè)當(dāng)前項(xiàng)目需求是需要做各種彈出框: 警示框, 確認(rèn)框及提示框.

實(shí)現(xiàn)

var LoginAlert = function(text) {
    this.content = text;
};
LoginAlert.prototype.show = function() {
    // 顯示警示框
};

var LoginConfirm = function(text) {
    this.content = text;
};
LoginConfirm.prototype.show = function() {
    // 顯示確認(rèn)框
};

var LoginPrompt = function(text) {
    this.content = text;
};
LoginPrompt.prototype.show = function() {
    // 顯示提示框
};

function createPop(type, text) {
    var o = new Object();
    o.content = text;
    o.show = function() {
        // 顯示方法
    };
    if(type === "alert") {
        // 警示框差異部分
    }
    if(type === "confirm") {
        // 確認(rèn)框差異部分
    }
    if(type === "prompt") {
        // 提示框差異部分
    }

    return o;
}

// 創(chuàng)建警示框
var userNameAlert = createPop("alert", "用戶名只能是26個(gè)字母和數(shù)字");

工廠方法模式(創(chuàng)建多類對象) 示例描述

通過對產(chǎn)品類的抽象使其創(chuàng)建業(yè)務(wù)主要負(fù)責(zé)用于創(chuàng)建多類產(chǎn)品的實(shí)例.

案例

假設(shè)有一批關(guān)于計(jì)算機(jī)培訓(xùn)的廣告資源需要投放, 一批是PHP要求黃色字體紅色背景, 一批JAVA綠色字體,
一批JAVASCRIPT粉色背景....

實(shí)現(xiàn)

var Java = function(content) {
    this.content = content;
    (functiont(content) {
        var div = document.createElement("div");
        div.innerHTML = content;
        div.style.color = "green";
        document.getElementById("container").appendChild(div);
    })(content);
};

var Php = function(content) {
    this.content = content;
    (functiont(content) {
        var div = document.createElement("div");
        div.innerHTML = content;
        div.style.color = "yellow";
        div.style.background = "red";
        document.getElementById("container").appendChild(div);
    })(content);
};

var Javascript = function(content) {
    this.content = content;
    (functiont(content) {
        var div = document.createElement("div");
        div.innerHTML = content;
        div.style.background = "pink";
        document.getElementById("container").appendChild(div);
    })(content);
};

// 創(chuàng)建學(xué)科類工廠
function JobFactory(type, content) {
    switch(type) {
        case "java":
            return new Java(content);
        case "php":
            return new Php(content);
        case "Javascript":
            return new Javascript(contet);
    }
}

// 又要添需求啦.....多加一批UI學(xué)科, 紅色邊框.....

// 代碼改進(jìn):

var Factory = function(type, content) {
    if(this instanceof Factory) {
        var s = new this[type] (content);
        return s;
    } else {
        return new Factory(type, content);
    }
};

// 在工廠原型中設(shè)置創(chuàng)建所有類型數(shù)據(jù)對象的基類
Factory.prototype = {
    Java: function() {
        // ...
    },
    Php: function() {
        // ...
    },
    Javascript: function() {
        // ...
    },
    UI: function() {
        // ...
    }
};

var data = [
    {type:"JavaScript", content:"javascript"},
    {type:"Java", content:"java"},
    {type:"PHP", content:"php"},
    {type:"UI", content:"ui"}
];

for(var i = data.length; i >= 0; i--) {
    Factory(data[i].type, data[i].content);
}

抽象工廠模式(創(chuàng)建類簇) 示例描述

抽象工廠模式一般不用來創(chuàng)建具體對象, 抽象類中定義的方法只是顯性地定義一些功能,　但沒有具體的實(shí)現(xiàn), 而一個(gè)對象需要具有一套完整的功能, 所以用抽象類創(chuàng)建的對象也是抽象的而非真實(shí)對象. 因此一般用它作為父類來創(chuàng)建子類.

抽象工廠其實(shí)是一個(gè)實(shí)現(xiàn)子類繼承父類的方法, 在這個(gè)方法中需要通過傳遞子類以及要繼承父類(抽象類)的名稱,并且在抽象工廠方法中又增加了一次對抽象存在性的一次判斷, 如果存在, 則將子類繼承父類的方法. 然后子類通過寄生式繼承.繼承父類的原型中需要注意一點(diǎn)是, 在對過渡類的原型繼承時(shí), 不是繼承父類的原型, 而是通過new關(guān)鍵字復(fù)制父類的一個(gè)實(shí)例, 這么做事因?yàn)檫^渡類不應(yīng)僅僅繼承父類的原型方法, 還要繼承父類的對象屬性, 所以要通過new關(guān)鍵字將父類的構(gòu)造函數(shù)執(zhí)行一遍來復(fù)制構(gòu)造函數(shù)中的屬性和方法

抽象工廠添加抽象類比較特殊, 因?yàn)槌橄蠊S是個(gè)方法不需要實(shí)例化對象, 故只需要一份, 因此直接為抽象工廠添加類的屬性即可.

實(shí)現(xiàn)

// 抽象工廠方法
var VehicleFatory = function(subType, superType) {
    // 判斷抽象工廠中是否有該抽象類
    if(typeof VehicleFactory[superType] === "function") {
        // 緩存類
        function F() {};
        // 繼承父類屬性和方法
        F.prototype = new VehicleFactory[superType] ();
        // 將子類constructor 指向子類
        subType.constructor = subType;
        // 子類原型繼承"父類"
        subType.prototype = new F();
    } else {
        // 不存在該抽象類拋出錯(cuò)誤
        throw new Error("未創(chuàng)建該抽象類");
    }
};

// 小汽車抽象類
VehicleFactory.Car = function() {
    this.type = "car";
};
VehicleFactory.Car.prototype = {
    getPrice: function() { return new Error("抽象方法不能調(diào)用"); },
    getSpeed: function() { return new Error("抽象方法不能調(diào)用"); }
};

// 公交車抽象類
VehicleFactory.Bus = function() {
    this.type = "bus";
};
VehicleFactory.Bus.prototype = {
    getPrice: function() { return new Error("抽象方法不能調(diào)用"); },
    getSpeed: function() { return new Error("抽象方法不能調(diào)用"); }
};

// 貨車抽象類
VehicleFactory.Truck = function() {
    this.type = "truck";
};
VehicleFactory.Truck.prototype = {
    getPrice: function() { return new Error("抽象方法不能調(diào)用"); },
    getSpeed: function() { return new Error("抽象方法不能調(diào)用"); }
};

// 創(chuàng)建產(chǎn)品子類繼承相應(yīng)的產(chǎn)品簇抽象類
// 寶馬汽車子類
var BMW = function(price, speed) {
    this.price = price;
    this.speed = speed;
}
//抽象工廠實(shí)現(xiàn)對Car抽象類的繼承
VehicleFactory(BMW, "Car");
BMW.prototype.getPrice = function() { return this.price };
BMW.prototype.getSpeed = function() { return this.speed };

// 公交車...
// 貨車...