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