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 EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 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/07/13 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
五月的鲜花活动方案
2014/08/21 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle