观察者模式的分析与实现

最新推荐文章于 2024-07-31 13:15:47 发布

黑山老妖橙

最新推荐文章于 2024-07-31 13:15:47 发布

阅读量114

点赞数

文章标签：设计模式

本文链接：https://blog.csdn.net/liuliuliuliumin123/article/details/107418534

版权

观察者模式

观察者(订阅者) --Watcher
- update():当事件发生时要做的事情
目标(发布者) --Dep
- subs数组: 存储所有观察者
- addSub(): 添加观察者
- notify(): 当事件发生时调用观察者的update()方法
没有事件中心


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>观察者模式</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
      // 目标-发布者
      class Dep {
        constructor(){
          this.subs = []
        }
        // 添加观察者-要判断观察者是否存在以及是否拥有update方法
        addSub(sub){
          if(sub&&sub.update){
            this.subs.push(sub)
          }
        }
        // 发布通知-事件发生时调用观察者的update方法
        notify(depName,fn){
          this.subs.forEach(sub=>{
            sub.update()
          })
        }
      }
      
      // 观察者-订阅者
      class Watcher {
        update(){
          console.log('update打印了~')
        }
      }
    
      //创建一个订阅者
      let watch = new Watcher() 
      //订阅者可以对update方法进行自定义，也可以继承自父类
      watch.update = function(){
        console.log('huhuhu')
      }
      //创建一个目标，也就是最终发布消息的目标
      let dep = new Dep()
      //将订阅者追加到目标的订阅列表中
      dep.addSub(watch)
      //目标开始发送通知，此时观察者的update会被调用
      dep.notify()
      
  </script>
</html>

控制台输出结果如下：

在这里插入图片描述
总结来看，观察者模式比较简单，目标记录了都是谁关注了我，我有更新时会调用这些观察者的update方法。

黑山老妖橙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
观察者模式的分析与实现

观察者模式观察者(订阅者) --Watcherupdate():当事件发生时要做的事情目标(发布者) --Depsubs数组: 存储所有观察者addSub(): 添加观察者notify(): 当事件发生时调用观察者的update()方法没有事件中心<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>观察者模式</title
复制链接

扫一扫