前端设计模式指南🎨:工厂模式

145 阅读1分钟

简单工厂模式:

又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。

实例:

function factory(type) {
    function Atype() {
        this.value = 'A'
        this.view = 'Atype'
    }
    function Btype() {
        this.value = 'B'
        this.view = 'Btype'
    }
    function Ctype() {
        this.value = 'C'
        this.view = 'Ctype'
    }
    switch(type) {
        case 'A': {
            return new Atype()
            break;
        }
        case 'B': {
            return new Btype()
            break;
        }
        case 'C': {
            return new Ctype()
            break;
        }
    }
}
​
​
const a = factory('A') // a = {value:'A',view:'Atype'}

由于上面这种写法,我们每次增加或修改类,都需要在两个地方操作,不是很方便,所以我们可以优化一下

function factoryPro(type) {
    function Type(opt) {
        this.value = opt.value
        this.view = opt.view
    }
    switch(type) {
        case 'A': {
            return new Type({
                value: 'A',
                view: 'Atype'
            })
            break;
        }
        case 'B': {
            return new Type({
                value: 'B',
                view: 'Btype'
            })
            break;
        }
        case 'C': {
            return new Type({
                value: 'C',
                view: 'Ctype'
            })
            break;
        }
    }
}

工厂方法模式

在上述的情况下,工厂是直接生产一个类,但是如果没有这个类,我们则需要有个"兜底"提示。同时,也可以增加一个功能,灵活处理直接使用方法和new方法的两种情况。同时,我们可以不在通过函数直接创建类,而是通过增加一个

funtion factory(type) {
    if(this instanceof factory){
            if(this[type]) {
                var a = new this[type]()
                return a
            }
            else {
                //...兜底
            }
    }
    else{
            return new factory(type);
    }
}
factory.prototype = {
    Atype: function() {
        this.value = 'A'
        this.view = 'Atype'
    },
    Btype: function() {
        this.value = 'B'
        this.view = 'Btype'
        this.fn = () => {...}
    }
}

抽象工厂模式

这种工厂方法其中的类是抽象类,通过子类的继承来实现实例,即function agency(subType, superType) subType是子类superType是抽象类。agency方法将抽象类让子类给继承。但是我觉得使用extends关键字也可以完成一样操作,非大型项目,这种模式用处不大。

其他文章传送门:

前端设计模式指南🎨:单例模式 - 掘金 (juejin.cn)