javascript 的观察者模式

发表于

javascript观察者模式

观察者模式主要是一种订阅事件，然后触发事件，调用回调函数，类似于nodejs的事件机制.

nodejs的事件模式

nodejs的事件主要继承自events模块，

1
2
3
const EventEmitter = require('events');
class MyEmitter extends EventEmitter{};
let myEmitter = new MyEmitter();


用一个新类继承EventEmitter，然后实例化它，就可以使用原型上的方法了。

1
2
3
4
5
myEmitter.on('events',()=>{
     console.log('events事件触发');
})
myEmitter.emit('events');


nodejs默认最多设置10个监听器，超出之后将会发出警告，可以使用以下方式增加监听数量。

1
myEmitter.setMaxListener(n);

javascript的订阅发布者模式

首先创建一个watcher，

1
2
3
4
5
6
7
8
9
10
function Watcher(){
    this.list = [];
}
Watcher.prototype.addEventListener = function(type,cb){
    if(!this.list[type]){ //检查是否注册事件,如果没有，则直接添加。
        this.list[type] = [cb];
    }else{
    	 this.list[type].push(cb);
    }
}

至此订阅器完成。如果有事件注册，添加到Watcher的原型方法addEventListener上，用来监听事件。

1
2
3
4
5
6
7
8
9
10
Watcher.prototype.emit = function(event){
    let events = this.list[event];
    if(events){
       retrun ;
    }else{
       events.forEach( item =>{
           item && item();
       })
    }
}

事件发射器完成，类似于nodejs的事件模式。

1
2
3
Watcher.prototype.removeListener = function(eventtype,cb){
    this.list[eventtype].splice(this.list[eventtype].indexOf(cb),1)
}

然后实例化Watcher。

1
2
3
4
5
6
7
8
9
10
11
12
var watcher = new Watcher();
watcher.addEventListener('events',()=>{
     console.log('events事件触发了')
})
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
//触发'events'事件。

删除注册的事件

1
2
3
4
5
6
7
8
9
10
11
var watcher = new Watcher();
var addEvents = function(){
	console.log('触发事件了哦！');
}
watcher.addEventListener('events',addEvents);
watcher.removeListener(addEvents,()=>{
    console.log('事件被删除了！')
})
 
watcher.emit('events');
//此时怎么也触发不了事件了，要删除一个注册的事件必须要用声明的方式创建callback函数，然后删除该cb，也就没有'events'事件了。