什么是工厂模式

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

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

举例说明

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

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

绘制UML类图

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

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

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

在这里插入图片描述

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 工厂
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;
}

}

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

1
2
3
4
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中,有这么一段代码:

1
2
3
4
5
6
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对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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(),然后一个个的进行替换,这可是非常恐怖的一件事。