什么是工厂模式？
工厂模式属于创建型设计模式，将对象的创建与使用分离。
- 将
new操作单独封装 - 遇到
new时，就要考虑是否该使用工厂模式了
上面的两个概念也是比较抽象哈，我们可以结合现实中的例子去思考，假如你去买汉堡
- 直接点餐、取餐，不会自己亲手做
- 商店要“封装”做汉堡的工作，做好后直接给消费者
实现一个工厂模式
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()
// init
p.fn1()
// 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 最著名的 JS X语法， 关于 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)
})
上面最终返回了一个异步创建的组件，其也是一种工厂模式。
通过一个工厂类来创建其他类的实例
class ProductA {
constructor(name) {
this.name = name;
}
operation() {
console.log(`Product A (${this.name}) is working.`);
}
}
class ProductB {
constructor(name) {
this.name = name;
}
operation() {
console.log(`Product B (${this.name}) is working.`);
}
}
class Factory {
createProduct(type, name) {
switch (type) {
case 'A':
return new ProductA(name);
case 'B':
return new ProductB(name);
default:
throw new Error('Invalid product type.');
}
}
}
const factory = new Factory();
const productA1 = factory.createProduct('A', 'productA1');
const productA2 = factory.createProduct('A', 'productA2');
const productB1 = factory.createProduct('B', 'productB1');
const productB2 = factory.createProduct('B', 'productB2');
productA1.operation();
// Product A (productA1) is working.
productA2.operation();
// Product A (productA2) is working.
productB1.operation();
// Product B (productB1) is working.
productB2.operation();
// Product B (productB2) is working.上述代码中，我们创建了两个产品类 `ProductA` 和 `ProductB`，以及一个工厂类 `Factory`。工厂类提供了一个创建产品实例的方法 `createProduct`，该方法根据传入的参数来决定创建哪种产品实例。在主程序中，我们通过工厂类创建了四个不同的产品实例，并分别执行它们的操作方法。