jS设计模式

设计模式：针对 特定问题, 给出的简洁而优化的处理方案

下面主要介绍三种设计模式：

单例模式：让一个构造函数只有一个实例对象

 function Person() {
  this.name = 'Jack'
}

// 全局
var instance = null

function singleton() {
  if (instance === null) {



    instance = new Person()
  }
  return instance
}
var p1 = singleton()
var p1 = singleton()
console.log(p1 === p2) // true

组合模式：

实现组合模式的三个条件： 1. 需要一个承载所有构造函数实例的数组 2. 需要一个方法, 向数组里面添加内容 3.需要一个方法, 能把数组里面的所有内容启动了

	 // 一个构造函数的启动方式
class Play {
  constructor () {}

  // 这个构造函数的启动方法
  init () {
    console.log('开始l')
    this.a()
    this.b()
    this.c()
  }

  a () {}

  b () {}

  c () {}
}

// 第二个构造函数
class Eat {
  constructor () {}

  init () {
    console.log('开始2')
  }
}

class Sleep {
  constructor () {}

  init () {
    console.log('开始3')
  }
}


// 组合模式的代码
class Compose {
  constructor () {
    // 用来承载每一个实例的数组
    this.composeArr = []
  }

  // 向数组里面添加内容
  add (instance) {
    this.composeArr.push(instance)
  }

  // 把数组里面的每一个内容调用了
  init () {
    console.log('总开关启动了')
    this.composeArr.forEach(item => item.init())
  }
}

// c 就是一个总开关
var c = new Compose()
// 每一次执行 add 方法就是向总开关上添加内容
c.add(new Play())
c.add(new Eat())
c.add(new Sleep())

// 只要我的总开关一启动
// 里面的每一个构造函数就同时都启动了
c.init()
console.log(c)

观察者模式：又称发布订阅者模式

目的: 1. 让 观察者 看着 被观察者, 只要数据改变了 2. 就让 观察者 做一些事情

// 1. 被观察者
class Student {
  constructor () {
    // 一个学生本身的状态, 就应该是好好学习
    this.state = '好好学习'
    // 准备一个数组
    // 谁在检时者这个学生, 就放在数组里面
    // 将来一旦状态从 好好学习 变成 玩手机的时候, 应该让这个 [] 里面的所有老师触发技能
    this.observers = []
  }

  // 方法
  // 1. 可以改变状态的方法
  setState (value) {      
    this.state = value //value 改变自己的状态
    this.notify()
  }

  // 2. 获取自己的状态
  getState () {
    return this.state
  }

  // 3. 添加观察着
  // 向 this.observers 里面追加一个看着这个同学的人
  attach (observer) {
    this.observers.push(observer)
  }

  // 4. 通知 this.observers 数组里面的每一个人, 状态改变了
  notify () {
    this.observers.forEach(item => item.qingjiazhang( this.state ))
  }

}

// 2. 观察者，等待被触发
class Observer {
  // constructor 就相当于 es5 的构造函数体 => 构造器
  constructor (name) {
    // 用它来标明一下我是班主任还是年级主任还是教务主任
    this.name = name
  }

  // 方法, 就是这些老师能触发的技能
  qingjiazhang (state) {
    console.log(`我是 ${ this.name }, 因为你 ${ state } 了, 我要请你家长来!`)
  }
}


var xiaoming = new Student() // 被观察者

var banzhuren = new Observer('班主任') // 观察者
var jiaowuzhuren = new Observer('教务主任') // 观察者
var nianjizhuren = new Observer('年级主任') // 观察者
// 让班主任看着小明
xiaoming.attach(banzhuren)
// 让教务主任看着小明
xiaoming.attach(jiaowuzhuren)
// 让年级主任看着小明
xiaoming.attach(nianjizhuren)

// 当小明状态改变的时候
//   xiaoming.setState() 就能改变 小明 现在的状态
//   就会触发 xiaoming.notify()
//   就会把 xiaoming.observers 这个数里里面的每一个对象的 请家长技能调用
xiaoming.setState('玩手机') // 对象调用方式, this -> 点前面是谁就是谁

家中逆战，无畏疫情！