坤坤老师告诉同学们什么是观察者模式

观察者模式

什么是观察者模式？

观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象。

例如：微博上的坤坤老师，当坤坤老师在微博发文章时，会自动通知所有的粉丝。
坤坤：坤坤老师发微博了，赶紧来围观啊！

坤坤老师即为目标对象，所有的粉丝即为依赖对象。

代码实现：

首先我们定义一个kk老师的类（目标类）

// 目标类
class Kk {
  constructor () {
    // 存储所有的粉丝（粉丝：观察者们）
    this.fans = []
  }
  
  // 收集粉丝
  add (fans) {
    this.fans.push(fans)
  }
  
  // 删除粉丝 （删除观察者）
  remove (fans) {
    const index = this.fans.findIndex(item => item === fans)
    if (index > -1) {
      console.log('删除粉丝' + fans.name)
      this.fans.splice(index, 1)
    }
  }
  
  // 通知所有粉丝，坤坤老师发微博了
  notify () {
    for(let observer of this.observers) {
      observer.update()
    }
  }
}

在创建一个粉丝类（观察者类）

// 观察者类
class Fans {
  constructor (name, age) {
    this.name = name
    this.age = age
  }
  // 坤坤老师告诉我他发微博了
  update () {
    console.log('坤坤老师告诉我发微博了，我是', this.name)
  } 
}

创建坤坤老师，创建粉丝，坤坤老师收集粉丝并告诉粉丝发微博了

// 创建坤坤老师
const kk = new Kk()

// 创建两位粉丝
const fans1 = new Fans('小花', 19)
const fans2 = new Fans('小草', 20)

// 坤坤老师收集粉丝
kk.add(fans1)
kk.add(fans2)

// 坤坤老师通知粉丝
kk.notify()

// 坤坤老师删除粉丝1
kk.remove(fans1)

// 坤坤老师通知粉丝
kk.notify()

最后输出：

坤坤老师告诉我发微博了，我是 小花
坤坤老师告诉我发微博了，我是 小草
删除粉丝小花
坤坤老师告诉我发微博了，我是 小草

看完的，点个关注再走呗！ 不定时更新前端技术！