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', '法律讲堂' )