JavaScript观察者模式(publish/subscribe)原理与实现方法

 更新时间:2017年03月30日 11:48:38   作者:柒青衿  
这篇文章主要介绍了JavaScript观察者模式(publish/subscribe)原理与实现方法,简单分析了javascript观察者模式的原理、功能并结合实例形式给出了观察者模式的实现技巧,需要的朋友可以参考下

本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法。分享给大家供大家参考,具体如下:

观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。

在Nodejs中通过EventEmitter实现了原生的对于这一模式的支持。在JavaScript中事件监听机制就可以理解为一种观察者模式。

下面给出一个JS自定义的PubSub,仔细阅读下面这段代码有助于你理解观察者模式。相关代码请查看github

function PubSub() {
 this.handlers = {};
}
PubSub.prototype = {
  // 订阅事件
  on: function(eventType, handler){
    var self = this;
    if(!(eventType in self.handlers)) {
      self.handlers[eventType] = [];
    }
    self.handlers[eventType].push(handler);
    return this;
  },
   // 触发事件(发布事件)
  emit: function(eventType){
    var self = this;
    var handlerArgs = Array.prototype.slice.call(arguments,1);
    for(var i = 0; i < self.handlers[eventType].length; i++) {
     self.handlers[eventType][i].apply(self,handlerArgs);
    }
    return self;
  },
  // 删除订阅事件
  off: function(eventType, handler){
    var currentEvent = this.handlers[eventType];
    var len = 0;
    if (currentEvent) {
      len = currentEvent.length;
      for (var i = len - 1; i >= 0; i--){
        if (currentEvent[i] === handler){
          currentEvent.splice(i, 1);
        }
      }
    }
    return this;
  }
};
var pubsub = new PubSub();
var callback = function(data){
  console.log(data);
};
//订阅事件A
pubsub.on('A', function(data){
  console.log(1 + data);
});
pubsub.on('A', function(data){
  console.log(2 + data);
});
pubsub.on('A', callback);
//触发事件A
pubsub.emit('A', '我是参数');
//删除事件A的订阅源callback
pubsub.off('A', callback);
pubsub.emit('A', '我是第二次调用的参数');

运行结果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 用JavaScript和jQuery实现瀑布流

    用JavaScript和jQuery实现瀑布流

    本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript禁止微信浏览器下拉回弹效果

    JavaScript禁止微信浏览器下拉回弹效果

    这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Javascript 实现放大镜效果实例详解

    Javascript 实现放大镜效果实例详解

    这篇文章主要介绍了Javascript 实现放大镜效果实例详解的相关资料,这里附有实现实例代码,具有参考价值,需要的朋友可以参考下
    2016-12-12
  • 基于BootStrap的图片轮播效果展示实例代码

    基于BootStrap的图片轮播效果展示实例代码

    这篇文章主要介绍了基于BootStrap的图片轮播效果展示实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • 使用JavaScript实现一个炫酷的罗盘时钟

    使用JavaScript实现一个炫酷的罗盘时钟

    在探究前端动画时,想到之前在锁屏壁纸看到的罗盘时钟,看着很是炫酷,于是说干就干,下面就跟随小编一起来学习一下如何使用JS实现一个炫酷的罗盘时钟效果吧
    2024-02-02
  • 小试SVG之新手小白入门教程

    小试SVG之新手小白入门教程

    这篇文章主要给大家介绍了关于SVG的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • JS的拖拽属性draggable详解

    JS的拖拽属性draggable详解

    这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 什么是JavaScript中的结果值?

    什么是JavaScript中的结果值?

    你知道JavaScript中的结果值是什么吗?这篇文章主要介绍了JavaScript结果值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS PromiseLike的判定与使用详解

    JS PromiseLike的判定与使用详解

    本文主要介绍了JS PromiseLike的判定与使用详解, 文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • JavaScript你不知道的一些数组方法

    JavaScript你不知道的一些数组方法

    这篇文章主要介绍了JavaScript你不知道的一些数组方法,需要的朋友可以参考下
    2017-08-08

最新评论