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)
原文地址:https://www.cnblogs.com/yanze/p/7500278.html