js-工厂模式

放假总结一把知识点，防遗忘。

比较简单，直接开始：

demo版

class Product {
    constructor(name) {
        this.name = name
    }
    fun1() {
        alert("func1")
    }
}
class Creator {
    create(name) {
        return new Product()
    }
}
let creator = new Creator()
let p1 = creator.create("p1")
p1.fun1()复制代码

jquery版

class jQuery{
    constructor(selector){
        let slice = Array.prototypo.slice
        let dom = slice.call(documen.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){
        ...
    }
    html(data){
        ...
    }
    ...
}
window.$ = function(selector){
    return new jQuery(selector)  //工厂模式
}复制代码

React版

var profile = React.createElement("div",null,
    React.createElement("img",{src: "avatar.png",className:"profile"}),
    React.createElement("h3",null,[user.firstName,user.lastName].join(" "))
);

...内部代码
React.createElement = function(tag,attrs,children){
    return new Vnode(tag,attrs,children)  //工厂模式
}
复制代码

Vue版

Vue.component('example-node',function(resolve,reject){
    setTimeout(function(){
        resolve({
            template: '<div>I am async!</div>'   //工厂模式，返回compoennt
        })    
    },1000)
})

复制代码