javaScript设计模式之工厂模式

写在前面

在前面大篇幅的讲解下，我们讲解了，设计原则，从设计到模式这个过度，为讲设计模式做了大量的铺垫。那么我们今天就进入设计模式中的第一个——工厂模式，这也是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()

找环境运行一下上面的代码，结果如下

上面的代码也是比较简单，但是，其反映的思想就是工厂模式

工厂模式的使用场景

工厂模式的代码和思想也是比较容易理解的，那么他在前端开发中，有什么样的应用场景呢？

1. 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)

2. React.createElement

如果你使用过React,我们知道react最著名的JSX语法， 关于JSX语法，实际上他是一种语法糖，也就是React.createElement的语法当，我们写的JSX语法，最终都会变成React.createElement的形式，我们通过传入各种标签名，最终生成Vnode实例，也就是虚拟DOM节点，但是，我们在开发的时候并不需要我们去写new Vnode()这样的代码，这就是一种工厂模式。大家可以到Babel的官网去自己手动试一下

而React.createElement的底层就是 new VNode()这样的操作。大家不用太纠结这里的react的细节，我们主要是理解工厂模式，可以知道里面的思想即可。

3. Vue异步组件

使用过Vue对Vue.component这个方法一定不陌生，其中有一种异步组件的形式，代码大概就像下面这样

Vue.component('async-component', (resolve, reject) => {
    setTimeout(() => {
         resolve({
            template: '
I am Async!
'
        })
    }, 1000)
})

上面最终返回了一个异步创建的组件，其也是一种工厂模式。

这里我们讲完了工厂模式，也做了一些场景的演示，还记得之前我们将过的设计原则吗？我们可以针对工厂模式，对设计原则做个严重，看看，工厂模式是不是符合我们的设计原则呢？

这里回顾一下五大设计原则，大家也可以到前面的文章中去找。

• S-单一职责原则
• O-开放封闭原则
• L-李氏置换原则
• I-接口独立原则
• D-接口独立原则

其中工厂模式中，“构造函数和创建者分离”，这是符合开放封闭原则的。

这就是工厂模式。大家要好好感受哦！