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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript整除实现代码
Nov 23 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php标签云的实现代码
2012/10/10 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php blowfish加密解密算法
2016/07/02 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
关于Python的一些学习总结
2018/05/25 Python
详解python-图像处理(映射变换)
2019/03/22 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
2014年大学团支部工作总结
2014/12/02 职场文书
给上级领导的感谢信
2015/01/22 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
使用Springboot实现健身房管理系统
2021/07/01 Java/Android