Js实现订阅发布模式（让你的代码写得贼六）

简单例子

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); //arguments  是发布消息时带上的参数
}
};

//测试例子
salesoffice.listen('squareMeter88',function (price) {   //小明订阅消息
console.log("价格=" + price );
});

salesoffice.listen('squareMeter110',function (price) {   //小红订阅消息
console.log("价格=" + price );
});

salesoffice.trigger('squareMeter88',2000000);
salesoffice.trigger('squareMeter110',3000000);

通用实现

//通用实现

var event = {
clientList:[],
listen : 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);
}
}
};

//在定义一个instalEvent 函数，这个函数可以给所有的对象都动态安装发布订阅模式

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

var salesOffices = {};

installEvent(salesOffices);

salesOffices.listen('squareMeter88',function (price) {   //小明订阅消息
console.log("价格=" + price );
});

salesOffices.listen('squareMeter110',function (price) {   //小红订阅消息
console.log("价格=" + price );
});

salesOffices.trigger('squareMeter88',2000000);
salesOffices.trigger('squareMeter110',3000000);

//取消订阅事件

event.remove = function (key,fn) {
var fns = this.clientList[ key ];

if( !fns ){ //如果key对应的消息没有被人订阅，则直接返回
return false;
}
if( !fn ){ //如果传入的具体的回调函数，表示需要取消key对应消息的所有订阅
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); //删除订阅者的回调函数
}
}
}
}

var salesOffices = {};

installEvent(salesOffices);

salesOffices.listen('squareMeter88',fn1 = function (price) {   //小明订阅消息
console.log("价格=" + price );
});

salesOffices.listen('squareMeter110',fn2 = function (price) {   //小红订阅消息
console.log("价格=" + price );
});

salesOffices.remove('squareMeter88',fn1); //删除小明的订阅
salesOffices.trigger('squareMeter110',2000000);

全局的发布–订阅对象

//全局的发布--订阅对象

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,
}
})();

Event.listen('squareMeter88',function (price) {
console.log("价额="+price);
});

Event.trigger('squareMeter88',2000000);