订阅发布模式 - 事件

实现订阅发布模式的基本思路:

  1. 订阅者把自己想订阅的事件注册到调度中心,所以第一步应该先实现订阅者到调度中心的方法。(订阅方法)
  2. 调度中心统一调度订阅者注册到调度中心的处理代码。(发布方法)
  3. 订阅者取消订阅事件(取消订阅方法)

 

直接附上代码:

var Pubsub = {

    on: function (evt, fn, ctx) {

        this.subscribe(evt, fn, ctx, false);

    },

    one: function(evt, fn, ctx) {

        this.subscribe(evt, fn, ctx, true);

    },

    off: function (evt, fn) {

        if (this.channels[evt] === undefined) { return; }

        var i, l;

        for (i = 0, l = this.channels[evt].length; i < l; i++) {

            var sub = this.channels[evt][i].fn;

            if (sub === fn) {

                this.channels[evt].splice(i, 1);

                break;

            }

        }

    },

    subscribe: function (evt, fn, ctx, once) {

        if (this.channels === undefined) {

            this.channels = {};

        }

        this.channels[evt] = this.channels[evt] || [];

        this.channels[evt].push({fn: fn, ctx: ctx, once: (once || false)});

    },

    trigger: function (evt) {

        if (this.channels && this.channels.hasOwnProperty(evt)) {

            var args = Array.prototype.slice.call(arguments, 1);
            var evtSubscribers = [];
            var evtSubscribersForExec = [];
            
            while(this.channels[evt].length > 0) {

                var sub = this.channels[evt].shift();

                if ( !sub.once ){

                    evtSubscribers.push(sub);
                }

                if (typeof (sub.fn) === 'function') {

                    evtSubscribersForExec.push(sub);

                }

            }

            this.channels[evt] = evtSubscribers;
            while(evtSubscribersForExec.length > 0) {

                var eventSub = evtSubscribersForExec.shift();

                eventSub.fn.apply(eventSub.ctx, args);
            }
        }
    }

};



例子:

function handler () {

    console.log(this.name)

}

function handler2 () {

    console.log(this.name)

}

var p1 = new Object();

p1.name = '小张';



var p2 = new Object();

p2.name = '小王';



Pubsub.on('p1', handler, p1);

Pubsub.on('p2', handler, p1);

Pubsub.on('p1', handler2, p2);

Pubsub.on('p2', handler2, p2);

Pubsub.trigger('p1')  // 小张 小王

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值