标签:listen 内容 span apply 通知 publish 实践 提取 观察者模式
观察者模式又叫发布订阅模式(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设计模式与开发实践一书的内容,提取里面的纲要方便学习。
标签:listen 内容 span apply 通知 publish 实践 提取 观察者模式
原文地址:http://www.cnblogs.com/Darlietoothpaste/p/6685577.html