前端设计模式-工厂方法模式

工厂方法模式本意是说将实际创建对象工作推迟到子类中。这样核心类就成了抽象类，不过对于JavaScript不必这么深究，JavaScript没有像传统创建抽象类那样的方式轻易创建抽象类，所以在JavaScript中实现工厂方法模式我们只需要参考它核心思想即可。所以我们将工厂方法看作是一个实例化的对象的工厂类。安全起见，我们采用安全模式类，而我们将创建对象的基类放在工厂方法类的原型中即可。

安全模式类可以屏蔽使用这对类的错误使用造成的错误，比如对于一个类的创建，忽略new关键字直接执行类

let Demo=function(){}
Demo.prototype={
    show:function(){
        console.log("成功获取！")
    }
}
let d =new Demo();
d.show();//成功获取！
let d=Demo();
d.show();//Cannot read properties of undefined (reading 'show')

// 安全模式
let Demo=function(){
    if(!(this instanceof Demo)){
        return new Demo();
    }
}
let d= Demo();
d.show();//成功获取！

// 安全模式创建的工厂类
let Factory=function(type,content){
    if(this instanceof Factory){
        let s =new this[type](content);
        return s;
    }else{
        return new Factory(type,content);
    }
}
// 工厂原型中设置创建所有类型数据对象的基类
Factory.prototype={
    java:function(content){...},
    javascript:function(content){...},
    UI:function(content){
        this.content=content;
        (function(content){
           var div = document.createElement('div')；
           div.innerHTML = content；
           div.style.border = '1px solid red'；
           document.getElementById('container').appendchild(div)；
　　     })(content)；
    }，
    php:function(content){...}
}
let data = [
　 {type：'Javascript', content：'Javascript哪家强'},
　 {type：'Java', content：'Java哪家强'},
　 {type：'php', content：'php哪家强'},
　 {type：'UI', content：'UI哪家强'},
　 {type：'UI', content：'UI哪家强'},
　 {type：'Javascript', content：'Javascript哪家强'},
　 {type：'Javascript', content：'Javascript哪家强'}
　];

for(let i = 6；i >= 0；i——){
　 Factory(data[i].type, data[i].content);
}