js event bus

转载

mob604756f16c66 2019-12-12 15:39:00

文章标签 js event bus js event bus vue React 文章分类 运维

js event bus dispatchEvent js click js event bus, js, event bus, vue, react, node.js, customEvent, publish-subscribe, pub/sub,

js event bus

js event bus_vue

concept of an event bus

You have an event handler platform, what is globally reachable, triggerable from any kind of JavaScript.
You can add and remove event listeners to the bus, also you can dispatch events with the help of the event bus and if any listener was registered to the event, the given callback will be triggered.

publish-subscribe

event emitters


let event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);


// global html
document.querySelector(`:root`).dispatchEvent(event);
// document.querySelector(`html`).dispatchEvent(event);
// document.querySelector(`body`).dispatchEvent(event);

document.addEventListener("newMessage", newMessageHandler, false);

EventEmitter



// 5.实现一个 EventEmitter类，这个类包含以下方法：
// on（监听事件，该事件可以被触发多次）
// once（也是监听事件，但只能被触发一次）
// fire（触发指定的事件）
// off（移除指定事件的某个回调方法或者所有回调方法）

class EventEmitter {
    constructor() {
        this.events = {};
    }
    on(name, callback) {
        this.events[name] = {
            callback,
            once: false,
        };
    }
    once(name, callback) {
        this.events[name] = {
            callback,
            once: true,
        };
    }
    off(name) {
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            delete this.events[name];
        }
    }
    fire(name, person) {
        // dispatchEvent
        let keys = Object.keys(this.events);
        if (keys.includes(name)) {
            let fun = this.events[name].callback;
            let once = this.events[name].once;
            fun(person);
            if (once) {
                delete this.events[name];
            }
        }
    }
}

const event = new EventEmitter()

event.on("drink", (person) => {
    log(person + "喝水");
});

event.on("eat", (person) => {
    log(person + "吃东西");
});

event.once("buy", (person) => {
    log(person + "买东西");
});

event.fire("drink", "我");
// 我喝水
event.fire("drink", "我");
// 我喝水
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("buy", "其它人");
//其它人买东西
event.fire("buy", "其它人");
//这里不会再次触发buy事件，因为once只能触发一次

event.off("eat") //移除eat事件
event.fire("eat", "其它人");
//这里不会触发eat事件，因为已经移除了


;(function (name, definition) {
  // 检测上下文环境是否为AMD或CMD
  var hasDefine = typeof define === 'function',
    // 检查上下文环境是否为Node
    hasExports = typeof module !== 'undefined' && module.exports;

  if (hasDefine) {
    // AMD环境或CMD环境
    define(definition);
  } else if (hasExports) {
    // 定义为普通Node模块
    module.exports = definition();
  } else {
    // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象
    this[name] = definition();
  }
})('EventEmitter', function () {
  function EventEmitter() {
    this.__events = {}
  }

  //订阅消息
  EventEmitter.prototype.addListener = function(name, listener) {
    if(!this.__events[name]){
      this.__events[name]=[listener];
    }else {
      this.__events[name].push(listener);
    }
  }

  //取消订阅
  EventEmitter.prototype.removeListener = function(name, listener) {
    if(!this.__events[name]){
      return;
    }else{
      let index=this.__events[name].indexOf(listener)
      if(index>-1){
        this.__events[name].splice(index,1);
      }
    }
  }

  //派发消息
  EventEmitter.prototype.emit = function(name, data) {
    if(!this.__events[name]){
      return;
    }else {
      this.__events[name].forEach(function(fn){
        fn.call(null, data);
      })
    }
  }
  return EventEmitter;
});