今天接触了事件监听,下午写出来了,洗澡的时候回想了好久居然又不甚明白。下面梳理下:
先来个简单版的,严格来说不算是监听,但是方便理解。
class Listener = {
constructor {
this.listeners = [ ]; //这是储存监听事件的容器;
}
subscribe ( functionName ) {
this.listeners.push( functionName ); //把要监听的事件加入容器里
return () {
this.listener.filter( l => l!==functionName ) //确保没有重复的
}
}
emit () {
this.listeners.forEach( listener => listener() ) //我每次emit的时候都把监听的事件都跑一次
}
}
let myListener = new Listener();
let myFunction = () => { console.log('success subscribed' ) }
myListener.subscribe(myFunction);
当我每次emit的时候,myFunction都被调用一次。
myListener.emit()
结果会是'success subscribed' 。
下面来个真正的监听
class Listener = {
constructor {
this._listeners = new Map(); //这是储存监听事件的容器,由于是个Map, 所以可以储存不同的事件;
}
subscribe ( label, callback ) { //监听的事件( label )以及相应的回调函数
this._listeners.has(label) || this._listeners.set(label, []);
this._listeners.push( callback ); //把要监听的事件加入容器里</span>
this._listener.filter( l => l !== callback ) //确保没有重复的callback
}
emit (label , ...arguments) {
let listeners = this._listener.get( label ) //找到要监听的事件( label )
if (listeners && listeners.length) { //确保listeners不是undefined
listeners.forEach( listener => listener( arguments ) ) //我每次emit一个事件的时候都把监听的事件都跑一次
return true;
}
return false;
}
}
let myListener = new Listener();
let myFunction = () => { console.log('success subscribed' ) }
myListener.subscribe( 'onprogress', myFunction);
myListener.subscribe( 'done', myFunction);
当我每次emit的时候,myFunction都被调用一次。
myListener.emit( 'onprogress' ,a, b, c);
结果会是success subscribed, 我监听的done是没有反应的。
所以监听就是某些事件被触发的时候,做点事情。