一个简单的观察者模式的JS实现

这不是原创文章,主要是写给自己看的。原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到。参考http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html。

function Observer(){
        this.fns=[];
    }
    Observer.prototype={
        //订阅
        subscribe:function(fn){
            this.fns.push(fn);
        },
        //退订
        unsubscribe:function(fn){
            this.fns=this.fns.filter(
                function(el){
                    if(el!==fn){
                        return true;
                    }
                }
            )
        },
        //发布
        update:function(o,thisObj){
            var scope=thisObj || window;
            this.fns.forEach(
                function(el){
                    el.call(scope,o);
                });
        }
    }
    var o=new Observer;
    var f1=function(data){
        console.log('Robbin: ' + data + ', 赶紧干活了!');
    };
    var f2 = function (data) {
        console.log('Randall: ' + data + ', 找他加点工资去!');
    };
    var f3 = function (data) {
        console.log('Li: ' + data + ', 我要揍他!');
    };
    //f1,f2,f3订阅了
    o.subscribe(f1);
    o.subscribe(f2);
    o.subscribe(f3);
    //f1取消了订阅
    o.unsubscribe(f1);
    //发布
    o.update('Tom回来了');

    //输出结果
    //Randall: Tom回来了, 找他加点工资去!
    //Li: Tom回来了, 我要揍他!

 

posted @ 2017-05-16 00:56  从过去穿越到现在  阅读(1499)  评论(0编辑  收藏  举报