JavaScript设计模式详解：03、工厂模式

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

---

什么是工厂模式

**工厂方法模式（英语：Factory method pattern）**是一种实现了“工厂”概念的面向对象设计模式。就像其他创建型模式一样，它也是处理在不指定对象具体类型的情况下创建对象的问题。工厂方法模式的实质是“定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。”

上面是工厂模式的定义，简单来说就是 我告诉你，我想要的是个什么东西，你给我就行了，怎么实现我不管。 还是不太明白对吧 ，没关系，我们举个例子。

举例说明

比如说我们到饭店去吃饭，直接点了个土豆丝，然后就坐那等服务员把做好的菜给拿过来就行了，我们总不用自己去后厨，切土豆，炒土豆对吧。这个时候，这个饭店就是一个工厂，我只告诉你我想要的是个什么东西，然后你给我就行了，怎么实现的我就不管了。

就这么一个小的例子，描述的就是一个工厂模式，然后我们就根据上面的这个例子，通过UML类图和代码来实现一下。

绘制UML类图

针对上面的例子，我们来绘制UML类图，

1. 首先我们到饭店去吃饭，直接点了个土豆丝，表示有一个饭店的类和一个菜品的类。这个饭店就是一个工厂，用来产出各种菜品，比如土豆丝。
2. 然后然后就坐那等服务员把做好的菜给拿过来就行了，表示有一个服务员的类，用来获取饭店（工厂）产出的内容（土豆丝），不过我们这里为了尽量减少与工厂模式无关的内容，我们这里去掉服务员这个类，可以假象为当饭店把菜做好了之后，菜会自己跑到客户桌子上。

就只有这两步，我们根据上面的内容来画一下它的UML类图：

上图就是我绘制出来的UML类图，其中Creator表示为饭店，即工厂，它通过方法create返回菜品，即Product。Product提供了两个属性三个方法，其中name表示菜品的名称，property表示菜品特点，方法中的suan()、la()表示菜品的特色，getName()则会返回property + name。

在明确了UML类图之后，我们通过代码来实现一下。

// 工厂
class Creator {
    constructor () {

    }

    create (name) {
        return new Product(name);
    }
}

// 菜品
class Product {
    constructor (name) {
        this.name = name;
        this.property = '';
        this.suan();
        this.la();
    }

    suan () {
        this.property += '酸';
    }

    la () {
        this.property += '辣';
    }

    getName () {
        return this.property + this.name;
    }

}

在上面的代码中我们通过饭店工厂Creator的create方法，来创建了对应的菜品Product。以下是我们的验证代码：

let creator = new Creator();
let tuDouSi = creator.create('土豆丝');

console.log(tuDouSi.getName()); // 酸辣土豆丝

这就是工厂模式的一个基础应用，不过大家可能还是不明白，这有啥用啊？ 我们直接new出来Product不一样吗？ 为什么要加Creator？说实在的，要是我的话，看到这里，也是一脸懵逼，完全不知道为啥要用它。没关系，应该在什么情况下去使用工厂模式，我们最后再说，我们先来看一下，工厂模式在现如今主流框架中的应用，看一下哪些主流框架的实现者是如何实现工厂模式的。

使用场景

对于jQuery大家都应该不陌生吧，大家在使用jQuery的时候，最常使用到的一个函数应该就是$()这个了吧，比如我们想要获取到页面中所有的div，我们就可以通过$('div')这样来实现。而$()函数，他就是一个工厂模式下的函数。我们可以从Github上去下载最新的jQuery源码，在jquery-master/src/core.js中，有这么一段代码：

	jQuery = function( selector, context ) {

		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	}

这段代码是不是和上面事例中的代码就很相像了，这就是一个工厂模式的应用，当我们调用$('div')的时候，在jQuery内部执行的就是这一段代码。这样设计有什么用呢？我们来做一个实验，我们分别使用$()、new jQuery.fn.init()、jQuery()这三个方法来获取页面中的div对象

    <div id="app">
        hello world
    </div>
    
    <script src="./jquery.js"></script>

    <script>
        const div1 = $('div');
        console.log(`div1: ${div1.text()}`); // hello world
        
        const div2 = new jQuery.fn.init('div');
        console.log(`div2: ${div2.text()}`);// hello world
        
        const div3 = jQuery('div');
        console.log(`div3: ${div3.text()}`);// hello world
    </script>

这三种方式都能达到同样的效果，但是让你按照使用的简单方式进行排序你会怎么排？ $() > jQuery() > new jQuery.fn.init()，这样对吧。这就是工厂模式的第一个作用：封装复杂的实现。

同样的，我们做一个假设，假如jQuery并没有提供$() 和 jQuery()这两个方法，我们只能通过new jQuery.fn.init()来去使用jQuery。当有一天jQuery.fn.init无法满足我们的需求了，我们需要调用jQuery.fn.init2这个方法，那怎么办？那对我们的程序可是灾难性的。这就是工厂模式的第二个作用：防止具体实现发生变化。

总结

我们什么时候应该使用工厂模式呢？当我们的应用中出现new操作符的时候，我们就应该考虑是否需要使用工厂模式了。我们再来想一下上面的饭店和土豆丝的例子，如果我们直接是使用new Product()来创建的土豆丝对象，那么有一天饭店不在生产土豆丝了，改成西红柿炒鸡蛋了，那么我们怎么办？我们只能找到项目中所有的new Product()，然后一个个的进行替换，这可是非常恐怖的一件事。