JavaScript-工厂模式

工厂模式

• 将new操作单独封装
• 遇到new时，就要考虑该是否使用工厂模式

示例

当你去购买汉堡，直接点餐，取餐，不会自己亲手做

商店要“封装”做汉堡的工作，做好直接卖给买者

class Product {
    constructor(name) {
        this.name = name
    }
    init(){
        alert('init')
    }
    fun1(){
        alert('fun1')
    }
    fun2(){
        alert('fun2')
    }
}

class Creator {
    creat(name) {
        return new Product()
    }
}

// 测试
let creat = new Creator()
let p = creat.creat('p1')
p.init()
p,fun1()

工厂模式应用场景

jQuery-$('div')

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)
}

// 测试代码

var $p = $('p')
console.log($p)
console.log($.addClass)

React.createElement

react如何做？

//jsx语法
var profile = <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName,user.lastName].join('')}</h3>
</div>

/*react手写dom*/
var profile = React.CreateElement("div",null,
    React.CreateElement("img",{src: "avatar.png", className: "profile"}),
    React.CreateElement("h3", null,[user.firstName, user.lastName].join(" "))
)

/*react内部代码*/

class Vnode(tag, attrs, children) {
    // ...省略内部代码...
}
React.CreateElement = function (tag, attrs, children) {
    return new Vnode(tag, attrs, children)
}

vue异步组件

Vue.component('asycn-example', function (reslove, reject) {
    setTimeout(function() {
        reslove({
            template: '<div>I am async!</div>'
        })
    })
})

设计原则验证

• 构造函数和创建者分离
• 符合开饭封闭原则