javascript设计模式-发布者/订阅者模式

最新推荐文章于 2022-02-15 15:53:52 发布

一枚攻城狮

最新推荐文章于 2022-02-15 15:53:52 发布

阅读量204

点赞数

分类专栏： JavaScript 文章标签： js发布者/订阅者模式

本文链接：https://blog.csdn.net/qq575792372/article/details/83621117

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

下面是发布者、订阅者的模式的示例，也有书上说观察者和发布者、订阅者是两种不一样的模式，我本人也是这么认为的，这里写出的是发布者/订阅者的模式，发布者和订阅者是一对多的关系，发布者发布可以把所有的订阅者加入进来，这种是被加入的关系，然后发布者会发布内容通知所有的订阅者，订阅者也可以根据自己的需要去取消订阅，网上写法诸多不均，只要理解概念，知道自己想要的模式，直接套用即可。

<!DOCTYPE html>
<html>
<head>
    <meta chart="utf-8" />
    <title>发布者/订阅者模式</title>
</head>
<body>
    <script>
         // 发布者
          function Publisher() {
              this.subscribes = []; // 添加的订阅者列表
              this.content = ""; // 发布者要发布出去的内容
          }

          // 发布者的行为
          Publisher.prototype = {
              // 添加订阅者
              addSubscribe: function(ovserver) {
                  if (this.subscribes && this.subscribes.length > 0) {
                      for (let obs of this.subscribes) {
                          if (obs != ovserver) {
                              this.subscribes.push(ovserver);
                              break;
                          }
                      }
                  } else {
                      this.subscribes.push(ovserver);
                  }

                  console.log(this.subscribes)

              },
              // 通知所有的订阅者
              noticeSubscribe: function() {
                  for (let obs of this.subscribes) {
                      obs.update(this.content)
                  }
              }
          }

          /**
           * 订阅者， 可以取消自己在发布者中的订阅列表
           */
          function Subscribe(name, publisher) {
              this.publisher = publisher;
              this.name = name;
              // 收到发布者的内容
              this.update = function(data) {
                  console.log(this.name + "接收到的更新：")
                  console.log("\t" + data)
              }
              // 取消订阅
              this.unSubscribe = function() {
                  console.log(name + "取消了订阅")
                  let subscribes = this.publisher.subscribes;
                  for (let i in subscribes) {
                      if (subscribes[i] == this) {
                          subscribes.splice(i, 1)
                          break;
                      }
                  }
              }
          }

          // 实际应用
          // 创建发布者
          var pub = new Publisher();

          // 创建订阅者
          var sub1 = new Subscribe("张三");
          var sub2 = new Subscribe("李四", pub);

          // 发布者把订阅者添加到自己的观察对象里面
          pub.addSubscribe(sub1);
          pub.addSubscribe(sub2);

          // 李四取消了订阅，发布者发送到消息不会再通知到他
          sub2.unSubscribe();

          // 发布者发布新的消息，并通知所有关注他的订阅者
          pub.content = "发布者说：我今天更新了一个新的说说，来评论吧"
          pub.noticeSubscribe();
    </script>
</body>
</html>

一枚攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript设计模式-发布者/订阅者模式

下面是发布者、订阅者的模式的示例，也有书上说观察者和发布者、订阅者是两种不一样的模式，我本人也是这么认为的，这里写出的是发布者/订阅者的模式，发布者和订阅者是一对多的关系，发布者发布可以把所有的订阅者加入进来，这种是被加入的关系，然后发布者会发布内容通知所有的订阅者，订阅者也可以根据自己的需要去取消订阅，网上写法诸多不均，只要理解概念，知道自己想要的模式，直接套用即可。<!DOC...
复制链接

扫一扫