javascript设计模式-观察者模式

javascript设计模式-观察者模式

观察者模式又名”发布&订阅者模式” , 在js中该模式使用频率应该最高!因为我们平时对dom的onclick就是观察者模式!

button1.onclick  =  function BtnClick (){
alert ( 'hello word' )
}

button1的点击事件是订阅者 订阅了 BtnClick 事件. BtnClick 是发布者,他发布内容是弹出Hello word

看到这里 对jquery熟悉的开发者都会想到jquery的on和trigger.

其实on就是订阅者在订阅,trigger是发布者在发布.

就如同收听广播一样,我们订阅了一个频道的广播 . 我不知道广播什么时候播出 或者我知道是晚上5:00,但是我现在正值上午8:00,距离开播还很久时间.

我们不可能一直坐等广播 这时候就可以订阅这个广播

广播的媒体制作人发布广播的时候我就去收听就行了

所以就是

//我要听广播 先订阅一个广播
var 我;
我.listen("法律讲堂");

//制作电台
var 法律讲堂=function(){
alert("中国人民宪法......");
}

//发布
播音员.trigger(法律讲堂);

用观察者模式实现订阅litsen和发布tigger

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) {
var stack, _ref;
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
}
}

实现收听广播

//订阅
var Radio = Event();
Radio.listen(  'play',  function( data ){
alert ( data );
});

//发布
Radio.trigger(  'play',  '法律讲堂' )