js实现事件总线EventBus

22 篇文章 3 订阅

手写EventBus

class EventBus {
  constructor() {
    this._events = [];//存储自定义事件
  }

  /**
   * 注册事件和处理函数
   * @param event
   * @param fn
   */
  on(event, fn) {
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.on(event[i], fn)
      }
    } else {
      // 存在直接push, 不存在创建为空数组再push
      (this._events[event] || (this._events[event] = [])).push(fn)
    }
  }

  /**
   * 注册事件和处理函数,触发一次后销毁
   * @param event
   * @param fn
   */
  once(event, fn) {
    let _self=this;
    function handler() {
      _self.off(event, handler);
      fn.apply(null,arguments);//emit里面调用时会给on方法传参
    }

    handler.fn = fn;//off里面根据这个判断销毁事件
    this.on(event, handler);
  }

  /**
   * 销毁事件和处理函数
   * @param event
   * @param fn
   */
  off(event, fn) {
    //不传参数表示清空所有
    if (!arguments.length) {
      this._events = [];
    }
    //数组循环清空
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.off(event[i], fn)
      }
    }
    const cbs = this._events[event];
    if (!cbs) {
      return;
    }
    //不传第二参表示清空某事件所有监听函数
    if (arguments.length == 1) {
      this._events[event] = null
    }
    let cb, i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) { //cb.fn===fn用来移除once注册的事件
        cbs.splice(i, 1)
        break
      }
    }
  }

  /**
   * 触发某事件所有回调并带参数
   * @param event
   */
  emit(event) {
    //once删除事件会导致下面循环过程中this._events内fn前移, 所以此处复制成新数组
    let cbs = [...this._events[event]];
    if (cbs) {
      for (let i = 0, l = cbs.length; i < l; i++) {
        try {
          cbs[i].apply(null,[...arguments].slice(1))
        } catch (e) {
          new Error(e, `event handler for "${event}"`)
        }
      }
    }
  }
}
//测试用例
let eb=new EventBus();
eb.once('event1',params=>console.log(11,params));
eb.on('event1',params=>console.log(22,params));
eb.emit('event1',33)

利用window.addEventListener自定义事件

  var myEvent = new CustomEvent('event_name', {
    detail:{//数据必须放在detail对象里面
      data:"携带数据"
    },
    bubbles: true,    //是否冒泡
    cancelable: false //是否取消默认事件
  });
  //注册到window
  window.addEventListener('event_name', function(event){
    console.log('携带数据为:', event.detail);
  });
  //懒加载 触发自定义事件
  function dispatchEvent(){
	if(window.dispatchEvent) {
	  dispatchEvent=function(){
		window.dispatchEvent(myEvent);
	  }
	} else {
	  dispatchEvent=function(){
	    window.fireEvent(myEvent);//兼容ie
	  }
	}
  }

jquery自定义事件

  $( "p" ).on( "myEvent", function( event, param ) {
    console.log(param);
  });
  $( "p" ).trigger( "myEvent", [ "123" ] );
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Nuxt2 中使用 eventBus 事件总线,可以通过以下步骤实现: 1. 创建一个 eventBus.js 文件 在项目的根目录中,创建一个 eventBus.js 文件,代码如下: ```javascript import Vue from 'vue'; export const eventBus = new Vue(); ``` 这里使用了 Vue 的实例来创建 eventBus,并且将它导出,这样就可以在项目中的任何地方使用它了。 2. 在需要使用 eventBus 的组件中引入 eventBus 在需要使用 eventBus 的组件中,可以使用以下代码来引入 eventBus: ```javascript import {eventBus} from '@/eventBus.js'; ``` 这里的 @ 表示项目的根目录,如果 eventBus.js 文件不在根目录中,那么需要改成相应的路径。 3. 使用 eventBus 发送事件 在需要发送事件的地方,可以使用以下代码来发送事件: ```javascript eventBus.$emit('eventName', data); ``` 这里的 eventName 是事件的名称,data 是传递的数据。 4. 使用 eventBus 监听事件 在需要监听事件的地方,可以使用以下代码来监听事件: ```javascript eventBus.$on('eventName', (data) => { // 处理事件 }); ``` 这里的 eventName 是事件的名称,data 是传递的数据。事件触发后,会执行回调函数中的代码。 总结: 以上就是在 Nuxt2 中使用 eventBus 事件总线的方法,通过使用 eventBus,可以在组件之间方便地进行通信。需要注意的是,eventBus 的使用需要谨慎,过多的使用可能会导致代码的可读性和维护性降低。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值