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 Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 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常用代码
2006/11/23 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
一篇不错的Python入门教程
2007/02/08 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python实现拓扑排序的基本教程
2018/03/11 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
劳资员岗位职责
2013/11/11 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
督导岗位职责范本
2015/04/10 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Python编写nmap扫描工具
2021/07/21 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS