JavaScript中EventBus实现对象之间通信


Posted in Javascript onOctober 18, 2020

 一、什么是EventBus?

我个人理解:EventBus 可以实现对象之间的通信,当数据或某些特性发生改变时,能自动监听事件作出一些改变。还有更多的内容可能我还没有拓宽。怎么实现通信呢?这里通过一个例子可以理解到其中的精髓。

二、一个简单的例子

add(){
  data+=1;
  render(data);
},
minus(){
  data-=1;
  render(data);
},
multiply(){
  data*=2;
  render(data);
},
divide(){
  data/=2;
  render(data);
},

以上代码是进行加减乘除的运算,数据data改变后,对数据data进行渲染,调用到渲染函数render();

有没有觉得这样很麻烦,代码重复非常多,但是想表达的意思就是一个:data 只要进行更新,就调用一次渲染函数render()

问题来了:有没有办法简化呢?只要data一改变,就自动调用render()函数

三、代码演示实例

const eventbus=$({});  // 使用jQuery库创建了一个eventbus。

let xx = {
  data:{
    n:100,
  }
}

updata(data){
  Object.assign(xx.data,data);  //批量赋值

  eventbus.trigger('updataed:xx.data');  //触发事件,事件名为:'updataed:xx.data'
}

/* 调用jquer封装的事件监听函数 */
eventbus.on('updataed:xx.data',()=>{
  render(xx.data);
})

/* 改进后的加减乘除函数 */

add(){
  updata({n:xx.data.n+1});
},
minus(){
  updata({n:xx.data.n-1});
},
multiply(){
  updata({n:xx.data.n*2});
},
divide(){
  updata({n:xx.data.n/2});
}

只要一调用updata()函数,就会使eventbus.trigger('updataed:xx.data')触发,然后事件监听就会触发,自动调用render()函数进行渲染

四、使用class 封装+继承EventBus

class EventBus{
  constructor(){
    this.eventbus=$(window);  //使用jquery将eventbus挂载到全局window上
  }
  on(eventName,fn){
    this.eventbus.on(eventName,fn);
  }
  trigger(eventName){
    this.eventbus.trigger(eventName);
  }
  off(eventName,fn){
    this.eventbus.off(eventName,fn);
  }
}

const eventbus=new EventBus();

eventbus.trigger('updated:xx.data')
eventbus.on('updated:xx.data',()=>{
  render(xx.data);
})
eventbus.off('updated:xx.data')

/* 继承EventBus */

class module extends EventBus{
  constructor(){
    super();  //必须继承父类的构造函数constructor
  }
}

module.trigger('updated:xx.data')
module.on('updated:xx.data',()=>{
  render(xx.data);
})
module.off('updated:xx.data')

为何要进行class 封装和继承EventBus?

答:为了让代码更加格式化,不仅在这里能用到EventBus,在其他地方也能使用上。尤其在模块化的操作中,封装+继承这些就显得十分的重要。这样能让代码有更好的维护性。其他模块使用到eventbus时的还能有更多的变样,可以覆盖重写父类方法或者再添加一些方法。

到此这篇关于JavaScript中EventBus实现对象之间通信的文章就介绍到这了,更多相关JavaScript EventBus对象通信内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 #Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 #Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 #Javascript
vue自定义树状结构图的实现方法
Oct 18 #Javascript
axios封装与传参示例详解
Oct 18 #Javascript
You might like
php设计模式 State (状态模式)
2011/06/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
JS回调函数深入理解
2019/10/16 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
python文件和目录操作函数小结
2014/07/11 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python中正则表达式详解
2017/05/17 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python和js交互调用的方法
2020/06/23 Python
Python必须了解的35个关键词
2020/07/16 Python
python给list排序的简单方法
2020/12/10 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
公司演讲稿开场白
2014/08/25 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android