学习javascript设计模式之发布-订阅(观察者)模式

1、发布-订阅模式又叫观察者模式，它定义对象之间一种一对多的依赖关系。

2、如何实现发布-订阅模式

　　2-1、首先指定好发布者

　　2-2、给发布者添加一个缓冲列表，用户存放回调函数以便通知订阅者

　　2-3、最后发布消息时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数

例子:

var salesOffice = {};
salesOffice.clientList = [];
salesOffice.listen = function(key,fn){
    if(!this.clientList[key]){
        this.clientList[key] = [];
    }
    this.clientList[key].push(fn);
}
salesOffice.trigger = function(){
    var key = Array.prototype.shift.call(arguments),
        fns = this.clientList[key];
    if(!fns || fns.length == 0){
        return false;
    }
    for(var i=0,fn; fn = fns[i++];){
        fn.apply(this,arguments);
    }
}

salesOffice.listen('s88',function(p){
    console.log("价格+" + p)
})

salesOffice.listen('s300',function(p){
    console.log("价格+" + p)
})

salesOffice.trigger('s88',20000);
salesOffice.trigger('s300',3000);

发布订阅的通用实现:

var event = {
    clientList : [],
    listener :function(key,fn){
        if(!this.clientList[key]){
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn); //订阅消息添加进缓存列表
    },
    trigger:function(){
        var key = Array.prototype.shift.call(arguments),
            fns = this.clientList[key];
            if(!fns || fns.length === 0){
                return false;
            }
            for(var i=0,fn; fn=fns[i++];){
                fn.apply(this,arguments);
            }
    }
};

var installEvent = function(obj){
    for(var i  in event){
        obj[i] = event[i];
    }
}

通用订阅发布模式

//通用发布订阅模式
	//var evt = (evt) ? evt: window.event;
	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(){
			//删除

		}*/
		return {
			listen:listen,
			trigger:trigger,
			remove:remove
		}
	})();

/*	Event.listen("sales100",function(p){
		console.log("总价 :"+ (p * 70));
	});
	Event.trigger("sales100",8000);
*/

var a = (function(){
	var count = 0;
	document.getElementById("btn").onclick = function(){
	Event.trigger("add",count++);
}
})();

var b = (function(){
	var div = document.getElementById("show");
	Event.listen('add',function(p){
		div.innerHTML = p;
	})
})();