JavaScript -- 设计模式 创建型设计模式-工厂模式

也许你在网上看到有关工厂模式的其他教程（包括我在内,我在学校学习工厂模式时,老师用的c#),那些并不适合前端（JS)。

在前端中，当你考虑使用new运算符来创建对象的时候，就可以考虑使用工厂模式了。

工厂模式的类图可以是这样的

我不直接使用Product来生成实例，而是通过使用Creator.create方法来实现这个功能。

class Product {
    constructor(name) {
        this.name = name;
    }
    init() {}
    fn1() {}
    fn2() {}
}
class Creator {
    create() {
        return new Product();
    }
}

使用工厂模式的好处：

使得调用者不用关注细节，只需要简单的调用一个方法即可，使得创建者和调用者分离。

在前端中，那些地方用到了工厂模式。

1:  JQ的$运算符这就是一个工厂模式。

class jQuery {
    constructor(selector) {
        super(selector)
    }
    //  ....
}

window.$ = function(selector) {
    return new jQuery(selector)
}

2：React.createComponent()方法

熟悉react的应该知道createComponent是干什么的。

不难发现这些我们常用的框架 都有工厂模式的身影。