js设计模式之工厂模式

介绍

• 将new操作单独封装
• 遇到new时，就要考虑是否应该使用工厂模式
• 比如买汉堡：直接点餐、取餐，我们不会亲手做，商店要“封装”做汉堡的工作，做好直接给买者

UML类图

直接上工厂模式的代码

class Product {
	constructor(name} {
		this.name = name
	}
	init() {console.log('init')}
	fun1() {console.log('fun1')}
	fun2() {console.log('fun2')}
}
// 此处的Creator就是工厂
class Creator {
	create(name) {
		// 此处返回的是实例，工厂模式的特点
		return new Procuct(name)
	}
}

// 运行代码
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()
p.fun2()

工厂模式的场景

• Jquery - $(‘div’)

// jquery 代码为工厂模式
class jQuery {
    constructor(selector) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    append(node) {}
    addClass(name) {}
    html(data) {}
    // 此处省略若干 API
}
window.$ = function (selector) {
    return new jQuery(selector)
}

• React.createElement （创建虚拟dom的实例）
  来源双越老师《Javascript 设计模式系统讲解与应用》