《JavaScript設計模式》筆記 之 工廠方法模式

工廠模式

工廠方法模式，通過對產品類的抽象，使其創建業務主要負責用於創建多類的實例。

項目案例

需求：

來了一批廣告資源投放，關於計算機培訓，一批是Java的，字體是綠色的；還有一批是php,字體是黃色的，背景色是紅色；JavaScript的，背景色是粉絲的

。。。

按照上篇的簡單工廠模式，https://blog.csdn.net/weixin_44420276/article/details/91912039, 可以有如下代碼：

 //version 1.0
 var Java = function(content){
     this.content = content;
     (function(content){
         var div = document.createElement('div');
         div.innerHTML = content;
         div.style.color = 'green';
         document.getElementById('container').append(div)
     })(content)
 }

var Php = function(content){
    this.content = content;
    (function(content){
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'yello';
        div.style.background = 'red'
        document.getElementById('container').append(div)
    })(content)
}

var JavaScript = function(content){
    this.content = content;
    (function(content){
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.background = 'pink'
        document.getElementById('container').append(div)
    })(content)
}

//簡單工廠

function Factory(type,content){
    switch(type){
        case 'java':
            return new Java(content)
        case 'php':
            return new Php(content)
        case 'JavaScript':
            return new JavaScript(content)
    }
}

Factory('JavaScript','javaScript 哪家強')

雖然能完成業務，但是每次需求在改變的同時，不僅添加類，還要修改工廠函數。用工廠模式，是一個實例化對象的工廠模式，即新建一個工廠類，把你的業務類別加在它的子類（原型）中。安全起見，我們採用安全模式，而我們將創建對象的基類放在工廠方法類的原型中。

安全模式類

安全模式類：可以屏蔽使用對類的錯誤使用造成的錯誤。 比如新建類Demo，但是沒有new,因爲別人不知道這個對象是類還是什麼。

//安全模式類
var Demo = function(){};
Demo.prototype = {
    show:function(){
        console.log("成功獲取，，，")
    }
}

var d = new Demo()
d.show() // 成功獲取，，，

var d = Demo();
d.show() // Uncaught TypeError

//------------------------------

var Demo = function(){
    if(!this instanceof Demo){
        return new Demo()
    }
}
var d = Demo();
d.show()

安全的工廠方法

// version 2.0
//  安全的工廠方法

var Factory = function(type,content){
    if(this instanceof Factory){
        var s = new this[type](content)
        return s
    }else{
        return new Factory(type,content)
    }
}
// 工廠原型中設置所有類型對象的基類
Factory.prototype = {
    Java:function(content){
        //...
    },
    Php:function(content){
        //...
    },
    JavaScript:function(content){
        //...
    }
}

//使用
var data = [
    {type:'Java',content:'Java 哪家強'},
    {type:'Php',content:'Php 哪家強'},
    {type:'JavaScript',content:'JavaScript 哪家強'}
]

for(var i=3; i>=0,i--;){
    Factory(s[i],s[i].content)
}

頁面中創建不同的功能，顏色的按鈕，也可以用這樣的方法。