一个简单的观察者模式的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回来了, 我要揍他!

 

转载于:https://www.cnblogs.com/liaozhenting/articles/6859230.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值