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 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
javascript每日必学之运算符
Feb 16 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
详解vue项目构建与实战
Jun 27 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 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里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python随机数分布random测试
2018/08/27 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python如何写出表白程序
2020/06/01 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
广告设计应届生求职信
2014/03/01 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
导游词之五台山
2019/10/11 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Python - 10行代码集2000张美女图
2021/05/23 Python