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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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,js双版本
2012/09/25 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python入门篇之面向对象
2014/10/20 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
考试不及格检讨书
2014/01/09 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
学生通报表扬范文
2015/05/04 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android