eventBus实现对象之间通信

eventBus实现对象之间通信

目录

  • 什么是eventbus?
  • 一个简单的例子
  • 代码演示实例(使用jquery演示)

一、什么是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: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()函数进行渲染

原文链接:juejin.im

上一篇:element的table组件在flex布局下宽度不能自适应
下一篇:Vue项目嵌入编辑器的坑和前端工程化解决方案

相关推荐

  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个 继上一个im聊天组件增加了发动语音,语音视频通话功能 项目的源代码在这里 在线演示 项目结构如下: ...

    2 年前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    5 个月前
  • 面试官:说说Vue组件间通信有哪些方式(总结了6种)

    前言 当组件间通信的逻辑较为简单时,使用 Prop 和自定义事件足以应对; 但是当出现全局共享的状态、兄弟组件间通信等场景时,使用 Prop 和自定义事件可能会让逻辑变得非常复杂。

    23 天前
  • 面试官:前端跨页面通信,你知道哪些方法?

    引言 在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面...

    2 年前
  • 附实例!实现iframe父窗体与子窗体的通信

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。

    2 年前
  • 邂逅react(十二) 组件通信之context

    关于context概念解释起来很绕,很多功能也不常用,就简单解释一下最常用的方法 react中跨组件通信可以通过props逐层传递或者context创建对象进行数据传递,const name=Re...

    3 个月前
  • 邂逅react(十)-组件通信

    react组件化开发涉及到组件嵌套的问题,这就会出现组件间的通信先以一个简单的例子展示组件间的嵌套(类组件举例) class Header extends Component{//头部组件 co...

    3 个月前
  • 通过$listeners、inheritAttrs、$attr实现组件之间的数据通信

    适用于一下场景中的组件通行 项目比较小,不适合用VueX对状态进行处理 组件嵌套比较深,使用props会很繁琐 缺点 基本概念 inheritAttrs 默认情况下,子组件无法获取到prop...

    1 年前
  • 选项卡或窗口之间的通信

    Tomas M提出了一个问题:Communication between tabs or windows,或许与您遇到的问题类似。 回答者Tomas M给出了该问题的处理方式: Edit 2018: ...

    3 年前
  • 跨应用进程通信 - NativeMessage

    有问题,上知乎。知乎作为中文互联网最大的知识分享平台,以「知识连接一切」为愿景,致力于构建一个人人都可以便捷接入的知识分享网络,让人们便捷地与世界分享知识、经验和见解,发现更大的世界。

    2 年前

官方社区

扫码加入 JavaScript 社区