《JavaScript設計模式》筆記 之 簡單工廠模式

簡單工廠模式

簡單工廠模式，又稱靜态工廠方法，由一個工廠對象決定建立某一中産品對象類的執行個體。

項目案例：

需求：

• 1.使用者名，如果使用者輸入内容不符合規範就自定義一個警示框，提示資訊：使用者名不能超過16個字母或者數字；
• 2.使用者密碼，如果使用者輸入的密碼錯誤就自定義一個警示框，提示資訊：使用者密碼錯誤；
• 3.使用者名：使用者名不存在就自定義一個警示框，提示資訊：您的使用者名不存在，清重新輸入；
• 4.在警示框裡添加一個注冊按鈕
• 5.登入成功，除了有确定按鈕，還要有提示資訊。

。。。等等陸續要求

// version 1.0

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

//使用
var userNameAlert = new LoginAlert('使用者名不能超過16個字母或者數字');
userNameAlert.show()

var passwordAlert = new LoginAlert('使用者密碼錯誤')
passwordAlert.show()


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

var loginFailConfirm = new loginConfirm('您的使用者名不存在，清重新輸入');
loginFailConfirm.show()


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

可以看出，随着産品經理的需求一步步加，要不你瘋了，要不，你們要幹架。

現在就是工廠模式的優勢所在，比如體育用品，有好多種類，籃球，足球，網球，再把他們封裝在一個函數裡，我隻要知道這個函數，還有分類，裡面對應的基類就知道了啊

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

//足球基礎
var Football = function (){
    this.intro = "足球在世界範圍很流行"
}
Football.prototype = {
    getMember:function(){
        console.log("每個隊伍需要11名隊員")
    },
    getBallSize:function(){
        console.log("足球很大")
    }
}


//網球基礎
var Tennis = function (){
    this.intro = "網球比賽每年有很多系列賽"
}
Tennis.prototype = {
    getMember:function(){
        console.log("每個隊伍至少1名隊員")
    },
    getBallSize:function(){
        console.log("網球很小")
    }
}

// 重點來了   工廠

var SportsFactory = function(name){
    switch (name){
        case 'NBA':
            return new Basketball();
        case 'wordCup':
            return new Football();
        case 'FrenchOpen' :
            return new Tennis()
    }
}

//調用
var football = SportsFactory('wordCup');
console.log(football)
console.log(football.intro)
football.getMember()
           

這樣簡單的工廠模式就出來了

回過頭來，之前的需求

//version 2.0

var PopFacory = function(name){
    switch(name){
        case 'alert':
            return new LoginAlert()
        case 'confirm':
            return new loginConfirm()
        case 'prompt':
            return new LoginPrompt()
    }
}

           

隻是在基礎是封裝了一個工廠函數，但是這裡面有好多相同的地方，也是可以提取出來的。比如書的工廠，書有不同分類，但是都會有目錄，出版時間，頁碼等等。不同的屬性就做針對性的處理，參數傳參，

function createBook(name,time,type){
    var o= new Object();
    o.name = name;
    o.time =time;
    o.getName = function(){
        console.log(this.name)
    }
    return o;
}

var book1 = createBook("js book",2019,"js");
var book2 = createBook("css book", 2018,"css")

book1.getName();
book2.getName()
           

最後再看看需求他們都有共有的屬性content，原型方法show，不同的是提示框還是确認框之類的

// version 3,0
function createPop(type,text){
    var o = new Object();
    o.content=text;
    o.show = function(){
        //顯示方法
    }
    if(type = 'alert'){
        //
        console.log("alert")
    }
    if(type == 'prompt'){
        //
    }
    if(type == 'confirm'){
        //
    }
    return o
}
var userNameAlert = createPop('alert','使用者隻能是26字母和數字')
console.log(userNameAlert)


           

一個用構造函數執行個體化的，另一個是建立一個新對象，增強其屬性和功能來實作的。