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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
layui清除radio的选中状态实例
Nov 14 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+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
js 动态选中下拉框
2009/11/26 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
顶岗实习接收函
2014/01/09 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
2014全年工作总结
2014/11/27 职场文书
文明班级申报材料
2014/12/24 职场文书
淘宝好评语句大全
2014/12/31 职场文书
安装工程师岗位职责
2015/02/13 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript