《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)
}

页面中创建不同的功能，颜色的按钮，也可以用这样的方法。