题目

实现一个 SimpleEventEmitter，支持 trigger、once、on、off 方法

代码

  1. class SimpleEimtter {
  2.   constructor(el) {
  3.     this.emits = {}
  4.     this.el = el;
  5.     this.el.addEventListener('click',this.click);
  6.   }
  7.   click = (event) => {
  8.     //必须要在相应的事件函数中调用执行函数
  9.     this.trigger('click', event, this.el);
  10.   }
  11.   on(eventName, callback, once) {
  12.     if(!this.emits[eventName]) {
  13.       this.emits[eventName] = {};
  14.       this.emits[eventName]['fn'] = callback;
  15.       this.emits[eventName]['once'] = once;
  16.     }
  17.   }
  18.   once() {
  19.     this.on(...arguments, true);
  20.   }
  21.   off(eventName) {
  22.     if (this.emits[eventName]) {
  23.       this.emits[eventName]['fn'] = null;
  24.     }
  25.   }
  26.   trigger(eventName, ...rest) {
  27.     if (this.emits[eventName] && this.emits[eventName]['fn']) {
  28.       this.emits[eventName]['fn'].apply(this, rest);
  29.       // once执行后解除绑定
  30.       this.emits[eventName]['once'] && this.off(eventName)
  31.     }
  32.   }
  33. }
  34. export default SimpleEimtter;
let box = document.getElementById('box');
let box2 = document.getElementById('box2');
let m = new SimpleEimtter(box);
let m2 = new SimpleEimtter(box2);
m.on('click', function(a, b){
  console.log('on', 'box1', a, b)
})
m2.once('click',function(){
  console.log('once');
  m.trigger('click', 'trigger m click', '3', 4, 5);
  m.off('click');
})