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下获取object(ActiveX)的Param的代码
Sep 15 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
关于js陀螺仪的理解分析
Apr 11 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 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 使用memcached简单示例分享
2015/03/05 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python 瀑布线指标编写实例
2020/06/03 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
经典演讲稿汇总
2014/05/19 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年幼师工作总结
2015/04/28 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
java开发双人五子棋游戏
2022/05/06 Java/Android