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 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
浅析vue component 组件使用
Mar 06 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
使用原生js编写一个简单的框选功能方法
May 13 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下目前为目最全的CURL中文说明
2010/08/01 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
听课评语大全
2014/04/30 职场文书
五分钟演讲稿
2014/04/30 职场文书
优秀班组申报材料
2014/12/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书