JavaScript原生实现观察者模式的示例


Posted in Javascript onDecember 15, 2017

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

在Nodejs中通过EventEmitter实现了原生的对于这一模式的支持。

在JavaScript中事件监听机制就可以理解为一种观察者模式。通过onclick进行事件绑定,然后通过交互行为进行触发或者事件主动触发。

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

一、定义观察者类Pubsub

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }

二、实现事件订阅on

//传入事件类型type和事件处理handle
 on: function (type, handle) {
  if(!this.handles[type]){
   this.handles[type] = [];
  }
  this.handles[type].push(handle);
 }

三、实现事件发布emit

emit: function () {
  //通过传入参数获取事件类型
 var type = Array.prototype.shift.call(arguments);
  if(!this.handles[type]){
   return false;
  }
 for (var i = 0; i < this.handles[type].length; i++) {
   var handle = this.handles[type][i];
   //执行事件
  handle.apply(this, arguments);
  }
 }

需要说明的是Array.prototype.shift.call(arguments)这句代码,arguments对象是function的内置对象,可以获取到调用该方法时传入的实参数组。

shift方法取出数组中的第一个参数,就是type类型。

四、实现事件取消订阅off

off: function (type, handle) {
  handles = this.handles[type];
  if(handles){
   if(!handle){
    handles.length = 0;//清空数组
  }else{
    for (var i = 0; i < handles.length; i++) {
     var _handle = handles[i];
     if(_handle === handle){
      handles.splice(i,1);
     }
    }
   }
  }
 }

完整代码:

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }
 Pubsub.prototype={
  //传入事件类型type和事件处理handle
  on: function (type, handle) {
   if(!this.handles[type]){
    this.handles[type] = [];
   }
   this.handles[type].push(handle);
  },
  emit: function () {
   //通过传入参数获取事件类型
  var type = Array.prototype.shift.call(arguments);
   if(!this.handles[type]){
    return false;
   }
 for (var i = 0; i < this.handles[type].length; i++) {
    var handle = this.handles[type][i];
    //执行事件
   handle.apply(this, arguments);
   }
  },
  off: function (type, handle) {
   handles = this.handles[type];
   if(handles){
    if(!handle){
     handles.length = 0;//清空数组
   }else{
 for (var i = 0; i < handles.length; i++) {
      var _handle = handles[i];
      if(_handle === handle){
       handles.splice(i,1);
      }
     }
    }
   }
  }
 }

五、测试

var p1 = new Pubsub();
 p1.on('mm', function (name) {
 console.log('mm: '+ name);
 });
 p1.emit('mm','哈哈哈哈');
console.log('===============');
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log('mm2: '+ name);
 };
 var fn2 = function (name) {
 console.log('mm222: '+ name);
 };
 p2.on('mm2', fn);
 p2.on('mm2', fn2);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2', fn);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2');
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');

JavaScript原生实现观察者模式的示例

以上这篇JavaScript原生实现观察者模式的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
vue.js todolist实现代码
Oct 29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS如何把字符串转换成json
Feb 21 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
ReactNative中使用Redux架构总结
Dec 15 #Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
vue实现验证码输入框组件
Dec 14 #Javascript
基于滚动条位置判断的简单实例
Dec 14 #Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 #Javascript
ES6/JavaScript使用技巧分享
Dec 14 #Javascript
You might like
PHP比你想象的好得多
2014/11/27 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PDO::query讲解
2019/01/29 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
详解js 创建对象的几种方法
2019/03/08 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python 中如何获取列表的索引
2019/07/02 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
情人节活动策划方案
2014/02/27 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
英文自荐信范文
2015/03/25 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
参加招聘会后的感想
2015/08/10 职场文书
创业计划书之美甲店
2019/09/20 职场文书