设计模式学习(六)

5.发布--订阅模式

  1. 首先要想好谁是发布者(比如上面的卖家)。
  2. 然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺,卖家通过收藏了该店铺的一个列表名单)。
  3. 最后就是发布消息,发布者遍历这个缓存列表,依次触发里面存放的订阅者回调函数。

var event= {};
(function (q) {
 
    var topics = {}, // 回调函数存放的数组
        subUid = -1;
    // 发布方法
	 q.publish= function (topic, args) {
 
        if (!topics[topic]) {
            return false;
        }
 
        setTimeout(function () {
            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;
 
            while (len--) {
                subscribers[len].func(topic, args);
            }
        }, 0);
 
        return true;
 
    };
    //订阅方法
    q.subscribe = function (topic, func) {
 
        if (!topics[topic]) {
            topics[topic] = [];
        }
 
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };
    //退订方法
    q.unsubscribe = function (token) {
        for (var m in topics) {
            if (topics[m]) {
                for (var i = 0, j = topics[m].length; i < j; i++) {
                    if (topics[m][i].token === token) {
                        topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };
} (event));

//发布

event.publish('aaa',111);
//订阅

event.subscribe('aaa', function (topics, data) {
    console.log(data);
});


var Event = (function(){ 
	var clientList = {}, 
	listen, 
	trigger, 
	remove; 
	listen = function( key, fn ){ 
		if ( !clientList[ key ] ){ 
			clientList[ key ] = []; 
		} 
		clientList[ key ].push( fn ); 
	}; 
	trigger = function(){ 
		var key = Array.prototype.shift.call( arguments ), 
		fns = clientList[ key ]; 
		if ( !fns || fns.length === 0 ){ 
			return false; 
		} 
		for( var i = 0, fn; fn = fns[ i++ ]; ){ 
			fn.apply( this, arguments ); 
		} 
	}; 
	remove = function( key, fn ){ 
		var fns = clientList[ key ]; 
		if ( !fns ){ 
			return false; 
		} 
		if ( !fn ){ 
			fns && ( fns.length = 0 ); 
		}else{ 
			for ( var l = fns.length - 1; l >=0; l-- ){ 
				var _fn = fns[ l ]; 
				if ( _fn === fn ){ 
					fns.splice( l, 1 ); 
				} 
			} 
		} 
	}; 
	return { 
		listen: listen, 
		trigger: trigger, 
		remove: remove 
	} 
})(); 
var a = (function(){ 
	var count = 0; 
	var button = document.getElementById( 'count' ); 
	button.onclick = function(){ 
		Event.trigger( 'add', count++ ); 
	} 
})(); 
var b = (function(){ 
	var div = document.getElementById( 'show' ); 
	Event.listen( 'add', function( count ){ 
		div.innerHTML = count; 
	}); 
})(); 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值