xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

EventEmitter & custom events & sub/pub

https://repl.it/@xgqfrms/PPLabs-frontend-answers

// 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事件，因为已经移除了

UMD , CMD, AMD

https://github.com/wangzianan/EventEmitter/blob/master/eventEmitter.js

;(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;
});

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---