js的事件代理

安利一个 事件代理库

var fs = require('fs')
var eventProxy = require('eventProxy')
var ep = new eventProxy()
ep.on('got',function(content){
  console.log(content)
})

fs.readFile('tmp','utf-8', function(err, content){
  ep.emit('got', content)
})

最基本的方法就是on和emit,负责绑定事件监听器和发出事件,在上面的代码中,当fs完成文件的读操作之后,就发出got事件,这个时候之前的事件监听器就会捕获到它并执行回调函数。

Do it yourself

var EventProxy = function () {
  this._callbacks = {};
};
EventProxy.prototype.on = function(ev, callback){
  this._callbacks[ev] = callback;
  return this;
}
EventProxy.prototype.emit = function(eventname){
  var callback = this._callbacks[eventname]
  if(!callback){
    return console.log("no this event listener")
  }
  var args = [];
  for (var j = 1; j < arguments.length; j++) {
    args.push(arguments[j]);
  }
  callback.apply(this, args)
  return this;
}

我们只需要给event加上一个_callbacks数组,每次注册监听器的时候,把callback放进去就好啦,而当emit事件的时候,其实就是去这个_callbacks数组中找到对应的回调函数并执行。

var ep = new EventProxy()
ep.on('got', function(content){
  console.log(content)
})

fs.readFile('tmp', 'utf-8', function(err,content){
  ep.emit('got', content)
})

remove

有时候我们需要删除注册的监听器

EventProxy.prototype.remove = function(eventname){
  if(!this._callbacks[eventname]){
    return console.log("no such event listener")
  }
  delete this._callbacks[eventname]
}

once

有时候我们希望我们注册的事件只执行一次,也就是说事件一旦被触发,就立刻删除。

EventProxy.prototype.once = function(eventname,callback){
  var that = this;
  var wrapper = function(){
    callback.apply(that, arguments)
    that.remove(eventname);
  }
  this.on(eventname, wrapper)
  return this
}

上面的代码看起来稍微有点复杂,其实很简单。原来我们在注册事件的时候,是直接把回调函数注册到其中。而现在,我们把回调函数“装饰”起来,使其在回调执行后,移除事件监听器。下面我们来测试一下

var ep = new EventProxy()
ep.once('got', function(content){
  console.log(content)
})

fs.readFile('tmp', 'utf-8', function(err,content){
  ep.emit('got', content)
})
fs.readFile('tmp', 'utf-8', function(err,content){
  ep.emit('got', content)
})

我们两次读取文件,但是文件只被打印出来一次。原因是当我们第一次调用完回调后,got事件的监听器就被移除了。酷!

你可能感兴趣的:(js的事件代理)