写在前面
在前面大篇幅的讲解下，我们讲解了，设计原则，从设计到模式这个过度，为讲设计模式做了大量的铺垫。那么我们今天就进入设计模式中的第一个——工厂模式，这也是JS中比较重要的一个。这篇，我们来看看，什么是工厂模式，他在前端开发中，有什么地位和用途。
什么是工厂模式？
- 将
new操作单独封装 - 遇到
new时，就要考虑是否该使用工厂模式了
上面的两个概念也是比较抽象哈，我们可以结合现实中的例子去思考，假如你去买汉堡
- 直接点餐、取餐，不会自己亲手做
- 商店要“封装”做汉堡的工作，做好后直接给消费者
工厂模式UML类图
如果你之前看过工厂模式相关的知识，不难看到各种各样的表述工厂模式的UML类图，但是其中适合使用JS开发者看的却不多，因为这些图一般都是用Java的思想和语言特点画的，那我们就画一个适合前端看的工厂模式的UML类图。如下：
同样的，我们可以分析出UML类图后，代码也就是可以更好的实现了，下面我们用实际代码实现一个工厂模式。
class Product {
constructor(name) {
this.name = name
}
init() {
console.log('init')
}
fn1() {
console.log('fn1')
}
fn2() {
console.log('fn2')
}
}
class Creator {
create(name) {
return new Product(name)
}
}
// 测试
let creator = new Creator() // 创建一个工厂
let p = creator.create('p1')
p.init()
p.fn1()
找环境运行一下上面的代码，结果如下
上面的代码也是比较简单，但是，其反映的思想就是工厂模式
工厂模式的使用场景
工厂模式的代码和思想也是比较容易理解的，那么他在前端开发中，有什么样的应用场景呢？
- Jquery
$('div')和new $('div')有什么区别呢？
如果你用过JQ，你会发现，我们在使用JQ的时候，根本不会去写new $('div')这样的代码，也就是需要使用者去自己手动去new一个实例，首先这样写是比价麻烦的，再者，JQ的链式操作将成为噩梦，最致命的是，一但构造函数的命名发生变化，那将是灾难性的。所以，在使用JQ的时候，实际上我们用的是一种工厂模式，把实例化的过程和使用的过程分开。也就是$('div')的形式。比如下面这样的代码。
class jQuery {
constructor (seletor) {
const slice = Array.prototype.slice
const dom = slice.call(document.querySelectorAll(seletor)) // 过去dom节点，并返回一个数组(可能为多个dom节点)
const len = dom ? dom.length : 0
for(let i = 0; i < len; i++) {
this[i] = dom[i] // 将选中的dom映射到this上
}
this.length = len
this.seletor = seletor || ''
}
append(node) {
}
addClass(name) {
}
html(data) {
}
// 此处省略N个API
}
window.$ = function (selector) { // 这就相当于一个工厂
return new jQuery(selector)
}
var p = $('p')
console.log(p)
console.log(p.addClass)
- React.createElement
如果你使用过React,我们知道react最著名的JSX语法， 关于JSX语法，实际上他是一种语法糖，也就是React.createElement的语法当，我们写的JSX语法，最终都会变成React.createElement的形式，我们通过传入各种标签名，最终生成Vnode实例，也就是虚拟DOM节点，但是，我们在开发的时候并不需要我们去写new Vnode()这样的代码，这就是一种工厂模式。大家可以到Babel的官网去自己手动试一下
而React.createElement的底层就是 new VNode()这样的操作。大家不用太纠结这里的react的细节，我们主要是理解工厂模式，可以知道里面的思想即可。
- Vue异步组件
使用过Vue对Vue.component这个方法一定不陌生，其中有一种异步组件的形式，代码大概就像下面这样
Vue.component('async-component', (resolve, reject) => {
setTimeout(() => {
resolve({
template: '<div>I am Async!</div>'
})
}, 1000)
})
上面最终返回了一个异步创建的组件，其也是一种工厂模式。
这里我们讲完了工厂模式，也做了一些场景的演示，还记得之前我们将过的设计原则吗？我们可以针对工厂模式，对设计原则做个严重，看看，工厂模式是不是符合我们的设计原则呢？
这里回顾一下五大设计原则，大家也可以到前面的文章中去找。
- S-单一职责原则
- O-开放封闭原则
- L-李氏置换原则
- I-接口独立原则
- D-接口独立原则
其中工厂模式中，“构造函数和创建者分离”，这是符合开放封闭原则的。
这就是工厂模式。大家要好好感受哦！
网友评论