js工厂模式在jquery，vue，react中的应用

工厂模式定义

工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式，工厂模式就相当于创建实例对象的new

工厂模式的UML类图

上面的Creatot类就相当于工厂，Product相当于工厂中的产品

• 上图中Profuct类是产品，有name属性，还有三个方法，
• Creator是工厂类，里面有一个create方法，注意它的返回类型是Product类型

代码

// 工厂模式

class Creator{
    create(name){
        return new Productor(name)
    }
    
}

class Productor{
    constructor(name){
        this.name = name
    }
    init(){
        console.log(`this product was produced,its name is ${this.name}`);
    }
    usefor(application){
        console.log(`${this.name} is used for ${application}`);
    }
    quality(){
        console.log('it is good');
    }
}

let creator = new Creator()
let ball = creator.create('basketball')
ball.init()
ball.usefor('sports')
ball.quality()

工厂模式的应用

Jquery-$(‘div’)

$(‘div’)和new ${(}^{\prime }di{v}^{\prime })的区别,其实jquery的$()就是一个工厂模式，而第二种形式会报错，而且书写起来会特别麻烦

手写jquery的$()

class Jquery{
    constructor(selector){
        //Array.prototype.slice.call(参数)将参数里面的书转化为数组
        let dom = Array.prototype.slice.call(document.querySelectorAll(selector))
        console.log(dom);
        let len = dom ? dom.length:0
        for(let i=0;i<len;i++){
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''

    }
    addClass(name){
    }
    html(str){
    }

}

window.$ = function(selector){
    return new Jquery(selector)
}

react.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

React.createElement方法创建并返回一个给定类型的ReactElement元素。type参数可以是一个html标签名称字符串，也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性，这个参数是可选的。第三个参数是该元素的子节点，同样也是可选的。

源码大致是下面；

React.createElement方法创建的大概是一个Vnode的实例，虚拟DOM的实例，如果不封装new
Vnode(tag,…)的操作，把操作抛给程序员使用那将会造成巨大麻烦

Vue异步组件

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

截取官方的一段话：，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

设计原则的验证

• 工厂模式的构造函数和创建者分离
• 符合开放封闭的原则