JavaScript設(shè)計(jì)模式- 簡單工廠模式

Loong_T 發(fā)布于2019-08-23 12:08 / 1607人閱讀

摘要：簡單工廠模式又叫靜態(tài)工廠方法模式，由一個(gè)工廠對象決定創(chuàng)建某一種產(chǎn)品對象類的實(shí)例。主要用來創(chuàng)建同一類對象。場景一比如體育商店賣體育器材，里面有很多體育用品，及相關(guān)介紹，當(dāng)我們想買一個(gè)籃球及相關(guān)介紹時(shí)，只需要溫售貨員，他會(huì)幫你找到所有的東西。

簡單工廠模式又叫靜態(tài)工廠方法模式，由一個(gè)工廠對象決定創(chuàng)建某一種產(chǎn)品對象類的實(shí)例。主要用來創(chuàng)建同一類對象。
場景一：
比如體育商店賣體育器材，里面有很多體育用品，及相關(guān)介紹，當(dāng)我們想買一個(gè)籃球及相關(guān)介紹時(shí)，只需要溫售貨員，他會(huì)幫你找到所有的東西。

//籃球基類
var Baseketball = function () {
    this.intro = "籃球盛行于美國"
}
Baseketball.prototype ={
    getMember:function () {
        console.log("每個(gè)隊(duì)伍需要5名隊(duì)員");
    },
    getBallSize:function () {
        console.log("籃球很大");
    }
}
//足球基類
var Football = function () {
    this.intro = "足球在世界范圍內(nèi)很流行";
}
Football.prototype = {
    getMember:function () {
        console.log("每個(gè)隊(duì)伍需要11名隊(duì)員");
    },
    getBallSize:function () {
        console.log("足球很大")
    }
}
//網(wǎng)球基類
var Tennis = function () {
    this.intro = "每年有很多網(wǎng)球系列賽";
}
Tennis.prototype = {
    getMember:function () {
        console.log("每個(gè)隊(duì)伍需要1名隊(duì)員");
    },
    getBallSize:function () {
        console.log("網(wǎng)球很小");
    }
}
//運(yùn)動(dòng)工廠
var SportFactory = function (name) {
    switch (name) {
        case "NBA":return new Baseketball();
        case "wordCup":return new Football();
        case "FrenchOpen":return new Tennis();
    }
}

//為世界杯創(chuàng)造一個(gè)足球，只需要記住運(yùn)動(dòng)工廠SportsFactory,調(diào)用并且創(chuàng)建
var football = SportFactory("wordCup");
console.log(football);
console.log(football.intro);
football.getMember();

場景二：
登錄模塊和注冊模塊的需求中有許多提示框，可以利用簡單工廠模式，將提示框互相借鑒

var PopFactory = function (name) {
    switch (name) {
        case "alert":return new LoginAlert();
        case "confirm":return new LoginConfirm();
        case "promt":return new LoginPrompt();
    }
}

但是LoginAlert、LoginConfirm、LoginPrompt有很多是相同的，這時(shí)可以抽取相同的出來，如下：

function createPop(type,text) {
    //創(chuàng)建一個(gè)對象，并對對象拓展屬性和方法
    var o =new Object();
    o.content = text;
    o.show = function () {
        //顯示方法
    }
    if(type == "alert"){
        //警示框差異部分
    }
    if(type == "prompt"){
        //提示框差異部分
    }
    if(type == "confirm"){
        //確認(rèn)框差異部分
    }
    //將對象返回
    return o;
}
//創(chuàng)建警示框
var userNameAlert = createPop("alert","用戶名只能是26個(gè)字母和數(shù)字");

這兩種方式創(chuàng)建簡單工廠模式有區(qū)別，第一種是通過類實(shí)例化對象創(chuàng)建的，第二種是創(chuàng)建一個(gè)新對象然后包裝增強(qiáng)其屬性和功能來實(shí)現(xiàn)的。