工厂模式

工厂模式

1. UML 演示

• 将new操作单独封装
• 遇到new时，需要考虑

2. 代码演示

class Product {
  constructor(name) {
    this.name = name
  }

  init() {
    alert('init')
  }
  fn1() {
    alert('fn1')
  }
  fn2() {
    alert('fn2')
  }
}

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

//测试
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fn1()

3. 场景

3.1 jQuery - $(‘div’)

• $('div')和new $(''div)有何区别
• 前者是工厂模式
• 书写麻烦,jQuery 的链式操作将成为噩梦
• 一旦 jQuery 名称变化会有问题

3.2 React.createElement

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

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

3.3 vue 异步组件

Vue.component('async-demo', function(resolve, reject) {
  setTimeout(function() {
    resolve({
      template: '<div>async</div>'
    })
  }, 1000)
})

4. 设计原则

• 构造函数和创建者分离

• 符合开放封闭原则