设计模式-抽象工厂模式

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

抽象工厂模式是指有多个抽象类时，使用的一种工厂模式，其可以向使用方提供一个接口，让使用方在不指定具体实例的情况下，创建同一个类中的多个实例对象

概念看着一头雾水，举一个和我们前端息息相关的例子：

H5的代码是具备跨平台能力的，当我们使用HTML+CSS+JS开发了一套页面，其可以运行在不同的平台，可以是移动端、PC端，也可以是IOS端、Android端，不同端的展示形式是有一些差异的，比如IOS和Android都有一套各自的UI标准，同一套H5代码在其平台运行时，展示的形式的不一样的，比如一个Button元素，在不同操作系统展示时，是有各自的操作系统进行生成

结合UML理解：

上述描述通过代码实现：

class Factory {
    /**
     * 创建按钮
     */
    createButton() {}
}


class IosButton {
    render() {
        return "IOS系统按钮";
    }
}

class AndroidButton {
    render() {
        return "Android系统按钮";
    }
}

class IosFactory extends Factory {
    /**
     * 创建按钮
     */
    createButton() {
        return new IosButton();
    }
}

class AndroidFactory extends Factory {
    /**
     * 创建按钮
     */
    createButton() {
        return new AndroidButton();
    }
}

/**
 * button 基类
 */
class Button {
    constructor(os) {
        if(os === 'ios') {
            this.os = new IosFactory()
        }else {
            this.os = new AndroidFactory()
        }
    }

    render() {
        return this.os.createButton().render()
    }
}

const ios = new Button('ios')
console.log(ios.render()); // IOS系统按钮

const android = new Button('android')
console.log(android.render()); // Android系统按钮

一个按钮是的实例，是根据不同的os进行对应子类的创建

至此可以总结三种工厂模式：

简单工厂模式： 通过一个函数返回派生类的实例

工厂方法模式： 多了一个工厂类，要想创建对应的实例，需要先创建此工厂的实例，再通过此工厂来创建具体实例

抽象工厂模式： 同一个工厂可以创建多种产品

在前端开发中使用最多的是简单工厂模式，其余两种工厂模式使用较少，特别是抽象工厂模式