JavaScript设计模式 观察者模式
JavaScript设计模式 观察者模式
菜的黑人牙膏
发布于 2019-01-21 16:12:18
发布于 2019-01-21 16:12:18
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
举个例子，我来公司面试的时候，完事之后每个面试官都会对我说：“请留下你的联系方式， 有消息我们会通知你”。 在这里“我”是订阅者， 面试官是发布者。所以我不用每天或者每小时都去询问面试结果， 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。
在Js中，DOM事件实际上就是一个观察者模式。
document.body.addEventListener('click',function(){
...
},false);我们并不知道用户什么时候会点击body，所以注册了一个这样的事件，当body被点击时，body节点就会向订阅者发布这个消息。
除此之外，还可以随意的增加订阅者和删除订阅者：
document.body.addEventListener('click',function(){
console.log(1)
},false);
document.body.addEventListener('click',function(){
console.log(2)
},false);
document.body.addEventListener('click',function(){
console.log(3)
},false);基于上面的面试例子，可以由以下的代码来表现：
面试者把简历扔到一个盒子里， 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.
Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。
在Backbone框架中，事件的change机制就是一个观察者模式，当用户改变了某个属性时，会调用trigger事件来依次通知订阅者触发事件。
设计模式系列基本是参考JavaScript设计模式与开发实践一书的内容，提取里面的纲要方便学习。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-04-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读