js实现观察者模式

来源:互联网 发布:开淘宝店交保证金退吗 编辑:程序博客网 时间:2024/06/01 08:31

学习一下观察者模式:

贴上学习代码-

使得blogger成为发布者,然后分别用2个函数去订阅它的event1和event2事件,当blogger的event1和event2事件触发的时候,分别再触发前面订阅的两个函数;

需要注意的就是:

subscribers[type] 和subscribers.type是不同的意思,前者的type是"形参",我们可以用其他变量去代替,但是后面的则是"实参“(不知道这样解释可以否,按照自己的理解说的),实际定义了一个键为type的属性值;

如果看不懂的话,我举一个例子:

var type='lzj';var subscribers={};subscribers.type=1;console.log(subscribers.lzj)//undefined;console.log(subscribers.type)//1;subscribers[type]=1;console.log(subscribers.lzj)//1;console.log(subscribers.type)//undefined;



    var observer={        addSubscriber:function(callback,type){            if(typeof callback === 'function'){                var type=type||'any';                 if(typeof this.subscribers[type] === "undefined"){                    this.subscribers[type] = [];                 }              this.subscribers[type][this.subscribers[type].length]=callback;            }        },        removeSubscriber:function(callback,type){            var type=type||any;            for(var i=0;i<this.subscribers[type].length;i++){                if(this.subscribers[type][i]===callback){                  delete this.subscribers[type][i];                }             }        },        publish:function(what,type){            var type=type||'any';            for(var i=0;i<this.subscribers[type].length;i++){                if(typeof this.subscribers[type][i]==='function'){                    this.subscribers[type][i](what);                }            }        },        make:function(o){            for(var i in this){                if(this.hasOwnProperty(i)){                    o[i]=this[i];                                                 }            }            o.subscribers={                any:[]            }        }    }    var blogger={        event1:function(){            var content='blogger\'s event1 trigger'            this.publish(content,'event1');        },        event2:function(){            var content='blogger\'s event2 trigger';            this.publish(content,'event2');        }    };    observer.make(blogger);    var jack={        read:function(what){            console.log('jack:'+what)        }    };    var jill={        gossip:function(what){            console.log('jill:'+what)        }    };    blogger.addSubscriber(jack.read,'event1');    blogger.addSubscriber(jill.gossip,'event2');    blogger.removeSubscriber(jack.read,'event1')    blogger.event1();    blogger.event2();