一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。

学习Vue响应式原理-设计模式

引言

为了学习发布订阅模式，这里顺便学习一下四种常见的设计模式，

单例模式
观察者模式
发布订阅模式
策略模式

今天先学习一下前两个设计模式。

设计模式

单例模式

它是一个构造函数，且只能有一个实例对象。也就是不管 new 了多少次，都是只有这一个实例对象。

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

let instance = null
const single = () => {
  if (!instance) instance = new Person()

  return instance
}

const p1 = single()
const p2 = single()

console.log(p1 === p2);

上面的这种写法不太优雅，定义的变量在外边不太好。可以换一种写法，用闭包的形式，将我们的变量和类定义到内部中去。

const single = (function () {
  class Person {
    constructor(name) {
      this.name = name
    }
  }

  let instance = null

  return function () {
    if (!instance) instance = new Person()

    return instance
  }
})()

const p1 = single()
const p2 = single()

console.log(p1 === p2)
console.log(p1)

观察者模式

既然有观察者，那么肯定有被观察者。即当被观察者发生变化时，观察者就会被触发，进行处理。

原理就是监控一个对象的状态，当这个对象的状态发生变化时，触发相应的回调。

这里我们把

观察者 作为老板
被观察者 作为 打工人

这里注意老板不一定是一个人，也就是观察者不一定是一个，可以为多个，打工人 自然也可以是多个。

观察者

// 定义观察者的类
class Observer {
  constructor(name, fn = () => {}) {
    this.name = name
    this.fn = fn
  }
}

此时我们可以在这里创建观察者。

const boss1 = new Observer('boss1', () => {
  console.log('明天加班，共1天')
})

const boss2 = new Observer('boss2', () => {
  console.log('明后天都要加班，共2天')
})

被观察者

一个被观察者，需要有以下几个方法。

当前的被监听的值
以及能够改变当前的值的方法
添加观察者
删除观察者

/**
 * 被观察者
 *
 */
class Subject {
  constructor(state) {
    // 当前的状态
    this.state = state

    // 存放观察者
    this.observers = []
  }

  // 设置当前的状态
  setState(val) {
    this.state = val

    this.useObserver(this.state)
  }

  // 当被观察者状态发生变化的时候，触发当前所有的观察者，执行相关的观察者方法
  useObserver(state) {
    this.observers.forEach((item) => item.fn(state))
  }

  // 添加观察者
  addObserver(observer) {
    const isExistence = this.observers.filter((item) => item === observer)

    if (isExistence.length === 0) this.observers.push(observer)
  }

  // 删除观察者
  delObserver(observerName) {
    const isExistence = this.observers.filter((item) => item.name !== observerName)

    this.observers = isExistence
  }
}

创建被观察者

const worker1 = new Subject('打工人1号,在工作')
const worker2 = new Subject('打工人2号,在工作')

测试观察者模式

先给被观察者添加观察者

worker1.addObserver(boss1)
worker1.addObserver(boss2)

给被观察者删除某个观察者
```
worker1.delObserver('boss2')
```

改变被观察者的状态

worker1.setState('打工人1号,在摸鱼')

此时结果就是如下图所示，只要一改变状态，观察者立即进行响应。

总结

学习了设计模式中两大经典的模式，单例模式 和 观察者模式