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中removeClass()方法用法实例
Jan 05 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
node.js爬虫框架node-crawler初体验
Oct 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支付宝APP支付功能
2020/07/29 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
小程序自定义日历效果
2018/12/29 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
使用python生成目录树
2018/03/29 Python
Python实现多进程的四种方式
2019/02/22 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
高中军训第一天感言
2014/03/06 职场文书
建筑工地大门标语
2014/06/18 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
南湾猴岛导游词
2015/02/09 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python