https://www.npmjs.com/package/mitt

  1. import mitt from 'mitt'
  3. const emitter = mitt()
  5. // listen to an event
  6. emitter.on('foo', e => console.log('foo', e) )
  8. // listen to all events
  9. emitter.on('*', (type, e) => console.log(type, e) )
  11. // fire an event
  12. emitter.emit('foo', { a: 'b' })
  14. // clearing all events
  15. emitter.all.clear()
  17. // working with handler references:
  18. function onFoo() {}
  19. emitter.on('foo', onFoo)   // listen
  20. emitter.off('foo', onFoo)  // unlisten

Emmit

  • 简单的事件分发；
  • 在 react / vue.js / angular 用于跨组件的轻量级实现；
  • 事件订阅和发布
  • on(eventName: string, callback: Function): listen an event.
  • once(eventName: string, callback: Function): listen a event only once.
  • fire(eventName: string, …parameters: any[]): emit / trigger an event with parameters.
  • off(eventName?: string, callback?: Function): unsubscribe an event. ```typescript export interface Listener { cb: Function; once: boolean; }

export interface EventsType {

}

/**

  • const ee = new OnFire(); *
  • ee.on(‘click’, (…values) => {}); *
  • ee.on(‘mouseover’, (…values) => {}); *
  • ee.emit(‘click’, 1, 2, 3);
  • ee.fire(‘mouseover’, {}); // same with emit *

  • ee.off(); */ export default class OnFire {

    static ver = ‘VERSION‘;

    // 所有事件的监听器 es: EventsType = {};

    on(eventName: string, cb: Function, once: boolean = false) { if (!this.es[eventName]) { this.es[eventName] = []; }

    this.es[eventName].push({ cb, once, }); }

    once(eventName: string, cb: Function) { this.on(eventName, cb, true); }

    fire(eventName: string, …params: any[]) { const listeners = this.es[eventName] || [];

    let l = listeners.length;

    for (let i = 0; i < l; i ++) { const { cb, once } = listeners[i];

    cb.apply(this, params);

    if (once) {

    1.  listeners.splice(i, 1);
    2.  i --;
    3.  l --;

    } } }

    off(eventName?: string, cb?: Function) { // clean all if (eventName === undefined) { this.es = {}; } else { if (cb === undefined) {

    1.  // clean the eventName's listeners
    2.  delete this.es[eventName];

    } else {

    1.  const listeners = this.es[eventName] || [];
    2.  // clean the event and listener
    3.  let l = listeners.length;
    4.  for (let i = 0; i < l; i ++) {
    5.    if (listeners[i].cb === cb) {
    6.      listeners.splice(i, 1);
    7.      i --;
    8.      l --;
    9.    }
    10.  }

    } } }

    // cname of fire emit(eventName: string, …params: any[]) { this.fire(eventName, …params); } } 使用jsx on(event_name, callback)

绑定事件，参数为 event_name 和 callback， 当有名字为event_name的事件发生的时候，callback方法将会被执行。

这个方法会返回一个eventObj，这个可以用于使用un(eventObj)方法来取消事件绑定。

one(event_name, callback)

绑定（订阅）事件，参数为 event_name with callback. 当被触发一次之后失效。只能被触发一次，一次之后自动失效。

fire(event_name, data)

触发名字为 event_name 的事件，并且赋予系列变量datas为callback方法的输入值。

fireSync(event_name, data)

同步的方式触发名字为 event_name 的事件，并且赋予系列变量datas为callback方法的输入值。

un(eventObj / event_name)

取消事件绑定。可以仅仅取消绑定一个事件回调方法，也可以直接取消全部的事件。

返回所有的事件名称数组。

clear() 清空所有事件

import onfire from ‘onfire.js’;

// 绑定事件 var eventObj = onfire.on(‘test_event’, function(data1， data2) { console.log(‘this is a event 1’); }); var eventObj2 = onfire.on(‘test_event’, function(data1, data2) { console.log(‘this is a event 2’); });

// 触发事件 onfire.fire(‘test_event’, ‘test_data1’， ‘test_data2’);

// 取消绑定 onfire.un(eventObj); // 取消绑定这个事件. onfire.un(‘test_event’); // 取消绑定所有的 test_event. ```