工厂模式

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

工厂模式符合下列设计原则：
◆ 构造函数和创建者分离
◆ 符合开放封闭原则

1. 工厂模式demo

工厂模式类图

代码如下：

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

let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()

2. 工厂模式使用场景

1. jQuery - $('div')
2. React.createElement
3. vue 异步组件

2.1 jquery中的使用

◆ $('div')和new $('div')有何区别?
◆ 书写麻烦，jQuery的链式操作将成为噩梦
◆ 一旦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)
}

2.2 React.createElement

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

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

2.3 vue异步组件

Vue.component('asyncexample', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template:'<div>I am async!</div '
    })
  }, 1000)
})