创建型设计模式

2018-10-28

本篇是对javascript设计模式中的创建型设计模式的学习笔记

创建型设计模式

  • 工厂模式
  • 单例模式
  • 原型模式

工厂模式

当我们面向对象,要创建实例的时候,使用工厂模式。即将new 操作单独封装。 工厂模式印证了构造函数要和创建者分离,符合开放封闭

图片

应用场景

  • Jquery - $('div')
  • React.createElement

Jquery例子

图片

React.createElement

图片

单例模式

  • 系统中被唯一使用
  • 一个类只有一个实例

应用场景

  • 登录框
  • 购物车(vuex store )

图片

登录框

class LoginForm {
  constructor() {
    this.state = 'hide'
  }
  show() {
    if (this.state === 'show') {
      alert('显示登陆框')
      return
    }
    this.state = 'show'
    console.log('登陆框已经显示')
  }
  hide() {
    if (this.state === 'hide') {
      alert('隐藏登陆框')
      return
    }
    this.state = 'hide'
    console.log('登陆框已隐藏')
  }
}

LoginForm.getInstance = (function() {
  let instance
  return function() {
    if (!instance) {
      instance = new LoginForm()
    }
    return instance
  }
})()

let login1 = LoginForm.getInstance()
login1.show()

let login2 = LoginForm.getInstance()
login1.hide()

原型模式

  • 克隆自己,生成一个新对象。

Object.create()