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

設計原則驗證

• 構造函數和建立者分離
• 符合開飯封閉原則