js 观察者模式
观察者模式定义一种一对多的关系,多个观察者订阅一个主题对象,当主题对象发生改变的时候通知所有观察者,使他们能实现更新。
具体实现方式: 定义一个被观察对象,定义一个主题数组,观察者订阅主题通过往数组对象内添加回调函数来实现,当主题发生改变时轮流调用回调函数。
var subpub= { topics: [], uid: 0, //订阅 subscribe: function(topic, callback){ var tmp= this.topics[topic] || [] tmp.push({ token: ++this.uid, fun: callback }) this.topics[topic]= tmp }, //发布 publish: function(topic){ if(!this.topics[topic]){return;} var args= Array.prototype.slice.apply(arguments).slice(1) for(var i=0; i< this.topics[topic].length; i ++){ this.topics[topic][i].fun.apply(this, args) } } }; subpub.subscribe('a',function(){ alert(1) }) subpub.subscribe('a',function(a, b){ alert(a+b) }) subpub.publish('a', 2, 5)
有时我们不喜欢使用那么多this,不想把topics,uid作为被观察对象的参数,则可借助自执行函数的封闭作用域,结合闭包原理来换一种书写方式。
var subpub= {}; (function(sp){ console.log(sp) var topics=[], uid=0; //订阅 sp.subscribe= function(topic, callback){ var tmp= topics[topic] || [] tmp.push({ token: ++uid, fun: callback }) topics[topic]= tmp }; //发布 sp.publish= function(topic){ if(!topics[topic]){return;} var args= Array.prototype.slice.apply(arguments).slice(1) for(var i=0; i< topics[topic].length; i ++){ topics[topic][i].fun.apply(this, args) } } }(subpub)) subpub.subscribe('a',function(){ alert(1) }) subpub.subscribe('a',function(a, b){ alert(a+b) }) subpub.publish('a', 2, 5)