设计模式之观察者模式

1.观测者模式;

  有时候被称为发布订阅模式,定义了一种一对多的依赖关系,让多个观察者同时监听同一主题对象,这个主题对象在发生变化时会通知观察者,使它们可以更新自己;

复制代码
   var Observer = {};
 //添加观察者;
var add = function (name, callback){ if(typeof name == 'string' && typeof callback == 'function'){ Observer[name] ? Observer[name].push(callback) : Observer[name] = [callback]; } }
 //删除观察者;
var remove = function (name, callback){
    if(typeof name == 'string'){
var list = Observer[name];
  if(list){   
if( callback == null){   delete Observer[name];   }else{   for (var i = 0; i < list.length; i++){   if(callback == list[i]){   list[i] = null;    }    }   }   }
  }
}
  //调用观测者;
var broadcast = function (name){ var list = Observer[name]; if(list){for(var i = 0 ; i < list.length; i++){ var cb = list[i]; if(typeof cb == 'function'){ cb.apply(cb,Array.prototype.slice.call(arguments,1)); }else{ list.splice(i,1); i--; } } } } add('teacher',function(message){alert(message)}); broadcast('teacher','Hi,goodNight');
复制代码

 2,今天提出新需求,需要在观察者的内部实例化小观察者并且不与外层的观察者相互影响,因此对上述代码进行了优化,新代码为:

复制代码
function Observer(){
    this.callbacks = {};
}
Observer.callbacks = {};

Observer.add = Observer.prototype.add = function ( name, callback){
    if( typeof name == 'string' && typeof callback == 'function'){
        this.callbacks[ name ] ? this.callbacks[ name ].push( callback ) : this.callbacks [ name ] = [ callback ];
    }
}

Observer.remove = Observer.prototype.remove = function ( name , callback){
    if( typeof name == 'string' ){
        var list = this.callbacks[ name ];
        if(list){
            if( callback == null){
                    delete this.callbacks[ name ];
            }else{
                for(var i = 0; i < list.length; ++i){
                    if( list[ i ] == callback){
                        list[ i ] = null;
                    }
                }
            }
        }
    }
}

Observer.broadcast = Observer.prototype.broadcast = function( name ){
    var notify = this.callbacks[ name ];
    if( notify ){
        for( var i = 0; i < notify.length; ++i ){
            var cb = notify[i];
            if( typeof cb == 'function'){
                cb.apply(cb, Array.prototype.slice.call( arguments, 1 ));
            }else{
                notify.splice( i, 1 );
                --i;
            }
        }
    }
}
复制代码

 3.今天看到一个别人的小型私有事件管理,收集过来by GitHub @wangxiao

复制代码
var eventCenter = function() {
    var eventList = {};
    var eventOnceList = {};
    return {
        _on: function(eventName, fun, isOnce) {
            if (!eventName) {
                tool.error('No event name.');
            }
            else if (!fun) {
                tool.error('No callback function.');
            }

            if (!isOnce) {
                if (!eventList[eventName]) {
                    eventList[eventName] = [];
                }
                eventList[eventName].push(fun);
            }
            else {
                if (!eventOnceList[eventName]) {
                    eventOnceList[eventName] = [];
                }
                eventOnceList[eventName].push(fun);
            }
        },
        on: function(eventName, fun) {
            this._on(eventName, fun);
        },
        once: function(eventName, fun) {
            this._on(eventName, fun, true);
        },
        emit: function(eventName, data) {
            if (!eventName) {
                tool.error('No emit event name.');
            }
            var i = 0;
            var l = 0;
            if (eventList[eventName]) {
                i = 0;
                l = eventList[eventName].length;
                for (; i < l; i ++) {
                    eventList[eventName][i].call(this, data);
                }
            }
            if (eventOnceList[eventName]) {
                i = 0;
                l = eventOnceList[eventName].length;
                for (; i < l; i ++) {
                    eventOnceList[eventName][i].call(this, data);
                }
                eventOnceList[eventName] = [];
            }
        },
        remove: function(eventName, fun) {
            if (eventList[eventName]) {
                var i = 0;
                var l = eventList[eventName].length;
                for (; i < l; i ++) {
                    if (eventList[eventName][i] === fun) {
                        eventList[eventName].splice(i, 1);
                    }
                }
            }
        }
    };
};
复制代码

 

posted @   北京-树苗  阅读(193)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示