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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 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
Yii rules常用规则示例
2016/03/15 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
使用Python对Access读写操作
2017/03/30 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python空元组在all中返回结果详解
2020/12/15 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
关于热爱祖国的演讲稿
2014/05/04 职场文书
投标服务承诺书
2014/05/28 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
张思德观后感
2015/06/09 职场文书
高中开学感言
2015/08/01 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android