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


Posted in Javascript onMarch 30, 2017

本文实例讲述了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观察者模式(publish/subscribe)原理与实现方法

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

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

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jquery对表单操作2
Apr 06 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
You might like
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
ES6小技巧之代替lodash
2019/06/07 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
pip命令无法使用的解决方法
2018/06/12 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
敬老院活动总结
2014/04/28 职场文书
优秀家长自荐材料
2014/08/26 职场文书
忠诚教育心得体会
2014/09/03 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
党员批评与自我批评
2014/10/15 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python