JS设计模式（工厂模式）

工厂模式（和构造器模式差不多），其原理通过 new 或通过某个方法返回特定的新的对象实例。 工厂模式的好处在于通过给入特定的参数即可获得不一样的实例。

演示使用js实现工厂模式

/**
 * 定义一个大众汽车类
 * @param number
 * @constructor
 */
var DaZhongCar = function (number) {
        this.number = number
    }

// 定个需求：一家4s店出售的每台大众车的编号必须唯一（用户指定汽车编号），不能出现重复。

/**
 * 创建一个4s店类
 * @constructor
 */
var Shop4s = function () {
    /**
     * 用于记录汽车已经存在的车辆编号
     * @type {Number[]}
     */
    this.numbers = []

    /**
     * 出售汽车 （此处可以看作为工厂）
     * @param {Number} number 汽车编号
     */
    this.sell = function (number) {
        // 每次4s店出售前，判断这个汽车是否已经出售
        if (this.numbers.indexOf(number) !== -1) {
            console.log('此车辆已被出售')
            return
        }
        this.numbers.push(number)
        return new DaZhongCar(number)
    }
}

var shop4s = new Shop4s()

// 当如果存在多个用户需要购买同一编号的大众汽车时，通过函数工厂模式可以保证卖出的汽车编号都是唯一
shop4s.sell(1) // DaZhongCar(1)
shop4s.sell(1) // 此车辆已被出售

工厂模式如何应用到前端，例如dom操作？

假设现在有一个alert弹窗的需求，我需要通过调用某个方法即可向用户展示提示信息，并且可以同时多个alert展示

<br/>
/**
 * 创建一个MyAlert类
 * @param {String} msg 展示信息
 * @constructor
 */
var MyAlert = function (msg) {
    // 创建alert dom
    var alert = document.createElement('div')
    alert.append(msg)

    /**
     * 关闭弹窗方法
     */
    this.close = function () {
        alert.remove()
    }

    // 像body插入dom（为什么是向body插入？自己思考吧）
    document.body.append(alert)
}

/**
 * 弹窗的工厂方法
 * @param {String} msg 提示信息
 * @param {Number} timeout 倒计时，不传代表不会自动关闭
 * @returns {MyAlert}
 */
var createMyAlert = function (msg, timeout) {
    var alert = new MyAlert('这是提示信息')

    if (timeout) {
        setTimeout(alert.close, timeout)
    }
    return alert
}

// 创建一个myAlert实例，创建后页面就会出现提升信息
var myAlert1 = createMyAlert('这是提示信息', 3000) // 这个弹窗会在3秒后自动关闭
var myAlert2 = createMyAlert('这也是提示信息') // 此时页面上存在两个弹窗信息，但3秒后只会剩下这一个弹窗，如果需要关闭可以手动调用close方法

总结：工厂模式本质就是通过特定的方法创建出多个不一样的实例，在实际项目中可以运用在很多地方，如：dom创建，组装数据，甚至多个组件合并等等等等