工厂模式 之二 工厂方法模式

工厂方法模式：创建多类对象

通过对产品类的抽象，时期创建业务主要负责用于创建多累产品的实例

需求1：计算机培训广告投放：java，绿色字体；php，黄色字体，红色背景

//创建Java学科类
const Java = function(content){
    // 将内容保存起来，方便后面使用
    this.content = content
    // 创建对象时，通过闭包，直接执行，将内容按需求的样式插入到页面内
    ((content)=>{
        if(!document) return
        const div = document.createElement('div')
        div.innerHTML = content
        div.style.color ='green'
        document.querySelector('body').appendChild(div)
    })(content)
}
//创建Php学科类
const Php = function(content){
    this.content = content
    ((content)=>{
        if(!document) return
        const div = document.createElement('div')
        div.innerHTML = content
        div.style.color ='yellow'
        div.style.background ='red'
        document.querySelector('body').appendChild(div)
    })(content)
}

需求2：JavaScript，粉色背景

//创建JavaScript学科类
const JavaScript = function(content){
    this.content = content
    ((content)=>{
        if(!document) return
        const div = document.createElement('div')
        div.innerHTML = content
        div.style.background ='pink'
        document.querySelector('body').appendChild(div)
    })(content)
}
// 利用前面学的简单工厂模式，编写学科类工厂
function JobFactory(type,content){
    switch(type){
        case "java":return new Java(content)
        case "php":return new Php(content)
        case "JavaScript":return new JavaScript(content)
    }
}
JobFactory('JavaScript','JavaScript 哪家强')

问题：需求改变或者变多时，不仅要天机类，还要修改工厂函数
优化1：使用工厂方法模式（将创建对象的工作推迟到子类中，核心类变成抽象类），以后新加需求只需添加一个类
备注：由于JavaScript没写想java那样轻易创建抽象类，所以在JavaScript中实现工厂模式只需要参考核心思想即可。可以将工厂方法看做一个实例化对象的工厂类

// 安全模式创建创建工厂类
/*
安全模式：如果使用new实例化，正常实例化，
如果是通过调用函数的方式获取实例对象，
则将类进行实例化后并返回
*/
const Factory = function(type,content){
    if(this instanceof Factory){
        return new this[type](content)
    }else{
        return new Factory(type,content)
    }
}
// 工厂原型中设置创建所有类型数据对象的基类
Factory.prototype = {
    java(content){
        //...
    },
    javaScript(content){
        //...
    },
    ui(content){
        //...
    },
    php(content){
        //...
    }
}
const data = [
    {type:'JavaScript',content:'JavaScript 哪家强'},
    {type:'Java',content:'Java 哪家强'},
    {type:'php',content:'php 哪家强'},
    {type:'UI',content:'UI 哪家强'},
    {type:'Go',content:'JavaScript 哪家强'},
    {type:'JavaScript',content:'JavaScript 哪家强'},
]
for(let i = 0,l=data.length;i<l;i++){
    Factory(data[i].type,data[i].content)
}