精华内容
下载资源
问答
  • 主要介绍了js实现的订阅发布者模式,结合完整示例形式分析了js订阅发布者模式相关实现与使用方法,需要的朋友可以参考下
  • 主要介绍了JS模式之简单的订阅者和发布者模式,以一个完整实例形式详细分析了JS订阅者和发布者模式基本实现技巧,需要的朋友可以参考下
  • 主要介绍了JavaScript设计模式之观察者模式发布者-订阅者模式),本文详细的讲解了JavaScript中的观察者模式,需要的朋友可以参考下
  • 下面是发布者订阅者的模式的示例,也有书上说观察者和发布者订阅者是两种不一样的模式,我本人也是这么认为的,这里写出的是发布者/订阅者的模式发布者订阅者是一对多的关系,发布者发布可以把所有的订阅者...

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

     

    <!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>

     

    展开全文
  • 主要介绍了JavaScript设计模式之观察者模式发布订阅模式,结合实例形式详细分析了JavaScript观察者模式发布订阅模式相关概念、原理
  • 订阅发布者模式本质上也是一种生产者消费者模式,订阅者是消费者,发布者是生产者。如果一定要说个区别,就是抽象级别的区别吧。   订阅者肯定是个消费者,但消费者不一定是订阅者,发布者一定是个生产者,但生产...

    订阅发布者模式本质上也是一种生产者消费者模式,订阅者是消费者,发布者是生产者。如果一定要说个区别,就是抽象级别的区别吧。

     

    订阅者肯定是个消费者,但消费者不一定是订阅者,发布者一定是个生产者,但生产者不一定是个发布者。

    订阅发布者模式有时也称为观察者模式,订阅发布者(观察这和被观察者)存在着主动被动的关系,而生产者消费者比较中性吧。 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。而生产者消费者关系可以是1对1,1对多,多对1,多对多关系

     

    补充:在23种设计模式中的观察者模式中,并没有中间介-队列的概念,但生产者消费者模式再多线程环境下好像天生就有队列的概念。在订阅发布者之间引入消息队列后,可以实现订阅者和发布者之间的解耦,任务可以很好的以异步方式进行处理,所以说是否有中间队列不是订阅发布者模式和生产者消费者模式的区别

     

     

     

    如下蓝色字体部分为参考内容:

    如下摘自:http://www.codeceo.com/article/javascript-observer-pattern.html

    那么到底什么是观察者模式呢. 先看看生活中的观察者模式。

    好莱坞有句名言. “不要给我打电话, 我会给你打电话”. 这句话就解释了一个观察者模式的来龙去脉。 其中“我”是发布者, “你”是订阅者。

     

    再举个例子,我来公司面试的时候,完事之后每个面试官都会对我说:“请留下你的联系方式, 有消息我们会通知你”。 在这里“我”是订阅者, 面试官是发布者。所以我不用每天或者每小时都去询问面试结果, 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • js发布订阅者模式

    2019-08-26 18:02:54
    原理很简单:有20个人订了牛奶,每天新牛奶也来后,送奶工依次送到订奶客户...//存放订阅事件数组 var _events = []; class eventEmit { //绑定订阅事件 on(eventname,cb){ if(_events[eventname]) { _events...

    原理很简单:有20个人订了牛奶,每天新牛奶也来后,送奶工依次送到订奶客户的手里,,,,,,,

    代码如下:

    //存放订阅事件数组
    var _events = [];

    class eventEmit {
        //绑定订阅事件
        on(eventname,cb){
            if(_events[eventname])
            {
                _events[eventname].push(cb);
            }
            else
            {
                _events[eventname] = [cb];
            }
        }
        //触发发布事件
        emit(eventname,rest){
            if(_events[eventname]){
                _events[eventname].forEach(item =>{
                    item(rest)
                })
            }
        }
    }

     


    //gao订阅了a事件
    var gao = new eventEmit();
    gao.on("a",function(z){
        console.log("高收到信息:",z)
    })

     


    //wang订阅了a事件
    var wang = new eventEmit();
    wang.on("a",function(z){
        console.log("王收到信息:",z)
    })

     

     

    //管理员发布消息
    var main = new eventEmit()
    main.on("a",function(z){})
    main.emit("a","到点吃饭了")

     

    展开全文
  • JavaScript发布者-订阅者模式

    千次阅读 2019-05-03 20:26:53
    发布者-订阅者模式又称观察者模式:当一个对象(发布者)状态发生改变时,所有依赖它的对象(订阅者)都会得到通知。 该模式广泛应用在异步编程中:我们无需关注对象在异步运行期间的内部状态,只需要订阅感兴趣的...

    #仅简单描述,稍后会新增具体内容:

    发布者-订阅者模式又称观察者模式:当一个对象(发布者)状态发生改变时,所有依赖它的对象(订阅者)都会得到通知。

    该模式广泛应用在异步编程中:我们无需关注对象在异步运行期间的内部状态,只需要订阅感兴趣的事件发生点。

    简单说就是该模式让发布者和订阅者两个对象弱耦合,虽然不太清楚彼此的细节但是不影响彼此通信。

    1.DOM事件

    事实上在我们普通的编程中就应用过该模式,譬如

        document.body.addEventListener('click',function(){
        	console.log("test");
        },false);

    监听用户动作,但是我们并不知道用户什么时候点击。所以我们订阅了click事件,当body节点被点击时发布者body就向订阅者(整个这段程序就是一个订阅者)发布这个消息。

    2.vue中的双向数据绑定就是数据劫持结合发布者-订阅者模式实现的

    双向数据绑定的原理:通过Object.defineProperty给每个发布者或者说需要观察的对象Observer添加getter和setter方法,只要该对象数据发生变化那么就触发setter方法了就会通知Watcher订阅者,订阅者有多个由消息订阅器dep统一管理,Compile负责编译模板,将模板中的变量转换成数据渲染出来,同时将每个指令对应的节点绑定更新函数转化成订阅者一旦数据变化就会收到通知,更新视图。MVVM作为数据绑定的入口,整合了Observer Watcher Compile三者通过Observer监听自己model数据变化,Compile解析模板指令,利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化--视图更新,视图更新--数据变化的效果。

    3.实际应用

    简单的拿CSDN举例:没有用户登录的时候是一个界面,用户登录博客以后会有自己的博客风格譬如:主页背景、代码区的样式,早年使用新浪博客的时候还可以定制自己的博客模块。也就是说网站会在用户登录后做相应的渲染。而渲染的前提是ajax异步请求获取到了用户的登录信息。实现方式(思路)如下

    在login成功的回调函数里刷新博客的主页背景,代码区格式等。

    缺点如下

    • 这些模块不能自行修改自己的名字(因为要在login成功回调函数里使用它的名字做refresh)
    • 假设有一天CSDN也要做自定义模块添加,此时要在回调函数里再加个refresh显然维护起来真是麻烦呢!

    所以应用我们发布者-订阅者模式:

    发布者:回调函数里设定成功后就发布成功的信息

    订阅者:主页背景、代码区、自定义模块区等监听登陆成功信息。

    这样的话只要在自定义模块区添加监听信息的方法就行了,这个可以让开发该模块的同事自行完成就行了,开发登录模块的无需操心。

    展开全文
  • js实现订阅发布者模式

    千次阅读 2019-05-21 17:42:04
    //如果当前话题已经有订阅者,获取到订阅者数组 //一个话题名下的 订阅者事件可以是多个fn1, fn2, fn3 topics[topic] = topics[topic] ? topics[topic] : []; //给每个订阅者添加唯一的token var token = (++...
  • 在《javascript设计模式》这本书中, 在写到观察者模式的时候, 上来就第一句就是, 观察者模式又称发布订阅者模式. 说实话, 作为一个设计模式小白,我不太能分清楚他们到底是不是一种模式, 那就从先实现一个观察...
  • 观察者模式发布订阅模式(JSJavaScript 发布-订阅模式 问题描述 最近想学习一下Vue 源码,在设置$data的值的时候,是如何通知模板变化的,其中就用到了 “订阅-发布”模式,发现对此思路不是很
  • 存放订阅者的信息 list:{}, //添加订阅 listen:function(key,fn){ if(!this.list[key]){ this.list[key] = []; } typeof fn==='function' && this.list[key].push(fn); }, ...
  • JS 发布者订阅者模式

    2021-08-09 16:45:41
    下面是ES5实现发布订阅模式。 1、直接上代码。 function EventEmitter() { this.events = {}; }; // 订阅者 EventEmitter.prototype.on = function(ename, callback) { if (!this.events[ename]) { // 初始化创建...
  • 简单列子 下面是实现发布—订阅模式的步骤: 1、先要指定好谁充当发布者(比如售楼处) 2、然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册) ...// 定义订阅发布模式 var publ...
  • 发布订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开发中,一般用事件模型来替代传统的发布订阅模式。 代码实现如下 /...
  • 在软件开发领域,开发此功能往往用到发布订阅者模式。下面我以简单的javascript来说明。 定义发布者类。发布者最基本的两个属性:发送的消息,发送的人 function Publisher() { this.observers =[]; // 存储需要...
  • 1. 什么是观察者模式/发布-订阅模式? 2. 观察者模式的实现 3. 发布-订阅模式的实现 4. Vue中的发布-订阅模式 4.1 EventBus 4.2 Vue源码 5. 观察者模式的优缺点 6. 发布-订阅模式的优缺点
  • 上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式)。可在《Javascript设计模式》一书中,这两种模式还是有些区别的。书中原话如下: Observer模式要求希望接收到主题通知者的观察者必须订阅...
  • 缩略版 ... //发布者订阅模式 var shoeObj = {}; // 定义发布者 shoeObj.list = []; // 缓存列表 存放订阅者回调函数 // 增加订阅者 shoeObj.listen = function(fn) { shoeObj.list.push(f...
  • 主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • 他的本质就是做到,发布者唯一的(key),凡是订阅者多个(value) 具体的实现 let eventMap = new Map(); class Observe { /** * 发布信息 * @param {string} key key值 * @param {...any} args key之外的...
  • 前端日记 今天是前端日记的第一天,坚持至少每3天一个额外知识点,然后与大家一起分享。一个前端小白的学习之路。 发布者-订阅者模式
  • javascript 观察者模式发布订阅模式.pdf
  • 观察者模式发布订阅模式是形成js对象之间的一种依赖关系的模式,比如a发生了一些动作,b那边可以响应,观察者模式就是对象之间直接观察,比如在相亲会上,a一直观察b,当b透露出自己的信息,a会直接接收,判断是否...
  • 相对于观察者模式,发布订阅模式的规模更适用于较大规模的消息通知 优点:发布订阅模式将对象之间解耦,发布者不必关心消息传递给谁,订阅者只需要负责对应主题消息的接受即可 缺点:订阅者一旦实例化就必须占用内存...
  • 说到发布订阅模式,我看到很多人将它和观察者模式说成一个,看了这么多的博文介绍,我还是倾向于他们两个是两种模式。下面来说一下我的理解吧。 可以参考这篇https://www.cnblogs.com/lovesong/p/5272752.html来看...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,034
精华内容 8,013
关键字:

js订阅发布者模式