前端设计模式（二）：工厂设计模式

文章有参考：https://juejin.cn/post/6844904184257609735

​ 工厂设计模式，就是用来帮助我们生产复杂对象的一种套路，可以将变与不变的部分分离,将创建对象的过程封装起来，不对外暴露。

​ 工厂设计模式包括简单工厂模式、工厂方法模式，抽象工厂模式。

一、简单工厂模式

​ 简单工厂模式最大的优点在于实现对象的创建和对象的使用分离，将对象的创建交给专门的工厂类负责。

举个栗子，宠物有很多种，我们目前有：

class Dog { // 狗狗 
    constructor(name) { console.log(name) }
}

class Cat { // 小猫
    constructor(name) { console.log(name) }
}

class Mouse { // 小老鼠
    constructor(name) { console.log(name) }
}

我们正常需要去各个进货点去购买对应的小宠物

new Dog('Spike')
new Cat('Tom')
new Mouse('Jerry')

首先上述是同属一类的实例，我们如果要去各个进货点购买小宠物的话，劳累又伤神，所以我们可以去一家宠物店挑选我们需要的小宠物

class Pet { // 小小的宠物店 
    constructor(type, name) {
    this.pet = ""
        switch (type) {
            case 'dog': this.pet = new Dog(name); break;
            case 'cat': this.pet = new Cat(name); break;
            case 'mouse': this.pet = new Mouse(name); break;
            default: this.pet = '你还没有小宠物，快去买一只吧';
        }
    }
}

// 购买新的小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('mouse', 'Jerry')

二、工厂方法模式

工厂方法模式是对简单工厂的进一步优化， 在工厂方法模式中，我们不再提供一个统一的工厂类来创建所有的对象，而是针对不同的对象提供不同的工厂。也就是说每个对象都有一个与之对应的工厂。说的好像挺复杂，简单来说就是解决简单工厂模式存在不方便添加新的类的问题，因为添加新的类以后依然需要修改工厂函数。

那我们再接着上面的宠物例子，将小宠物店升级一番

const Pet = (() => { // 宠物店升级啦  
    const pets = {
        dog(name) { console.log(name) },
        cat(name) { console.log(name) },
        mouse(name) { console.log(name) },
        duck(name) { // 我是新来的宠物小鸭子      
            console.log(name)
        }
    }

    return class {
        constructor(type, name) {
            try { return pets[type](name) }
            catch (error) { console.log('你还没有小宠物，快去买一只吧') }
        }
    }
})()

// 重新购买小宠物
new Pet('dog', 'Spike')
new Pet('cat', 'Tom')
new Pet('duck', 'Duck')

宠物店升级之后，我们在宠物店进货的时候，想加入新宠物-小鸭子，只需要将 duck 这个小鸭子直接上架即可，而在简单工程模式中，我们不仅仅要去小鸭子的场地进一只小鸭子，还需要在 Pet 宠物店将小鸭子上架。

三、抽象工厂模式

抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

在抽象工厂模式中，接口是负责创建一个相关对象的工厂，不需要显式指定它们的类。每个生成的工厂都能按照工厂模式提供对象。

上面我们已经开了一个普通宠物店，而我们的生意慢慢的有了起色，这个时候想要做大做强，除了引入新的小宠物之外还需要不断的创新，于是我们开了一家水族馆。

class headPet { // 宠物总店
    sellpet(name) { // 出售宠物
        console.log('出售一只宠物', name)
    }
    desert(name) { // 遗弃宠物
        console.log('遗弃一只宠物', name)
    }
    operation(name, type) {
        switch (type) {
            case 'sell': {
                this.sellpet((name))
                break
            }
            default: {
                this.desert((name))
            }
        }
    }
}

class normalPet extends headPet { // 普通宠物分店
    constructor() {
        super()
    }
    dog(name, type) {
        this.operation(name, type)
    }
    cat(name, type) {
        this.operation(name, type)
    }
    mouse(name, type) {
        this.operation(name, type)
    }
}

class fishPet extends headPet { // 水族馆分店
    constructor() {
        super()
    }
    shark(name, type) {
        this.operation(name, type)
    }
    whale(name, type) {
        this.operation(name, type)
    }
}

function selectPet(shop) {
    switch (shop) {
        case 'normal': {
            return new normalPet()
        }
        case 'fish': {
            return new fishPet()
        }
        default: {
            console.log('暂无此分店哦！')
        }
    }
}

const normal = selectPet('normal')
normal.dog('Spike', 'sell') // 出售一只狗狗
normal.cat('Tom', 'desert') // 遗弃一只病猫
normal.mouse('Jerry', 'sell') // 出售一只小老鼠

const fish = selectPet('fish')
fish.shark('Shark', 'desert') // 遗弃一条死鱼
fish.whale('Whale', 'sell') // 出售一只鲸鱼

总结：

​ 工厂设计模式也就是为了抽象复用代码，使代码逻辑更清晰，同时更好的维护。这种模式特别适合在创建对象时逻辑复杂的情况，尤其是产品族的业务型代码，比如：家电类，有格力，美的等等，每个牌子都有不同的产品族，这样按牌子划分工厂类，完成创建大对象逻辑。以后再有其他牌子，根本不用动原有产品代码逻辑，只需再增加新的工厂类即可搞定。