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

我就是我 2023-03-01 13:35 8阅读 0赞

### 观察者模式 ###

什么是观察者模式？

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

例如：微博上的坤坤老师，当坤坤老师在微博发文章时，会自动通知所有的粉丝。  
坤坤：坤坤老师发微博了，赶紧来围观啊！  
![在这里插入图片描述][20200726205631927.gif]  
坤坤老师即为目标对象，所有的粉丝即为依赖对象。

代码实现：

首先我们定义一个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()

最后输出：

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

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

[20200726205631927.gif]: /images/20230208/81180dc803c240ac997887d726784a18.png