关于前端:发布订阅模式

公布订阅（pubsub）

公布 - 订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象状态产生扭转时，所有依赖于它的对象都将失去告诉

留神：一对多（一指的是公布，多指的是订阅），是先订阅再公布

作用：

（1）反对简略的播送通信，当对象状态产生扭转时，会主动告诉曾经订阅过的对象

（2）能够利用在异步编程中，代替回调函数，能够订阅 ajax 之后的事件，只须要订阅本人须要的局部

（3）对象之间的松耦合

（4）跨组件之间的传值

如何实现公布 – 订阅模式？

1. 首先要想好谁是发布者？

2. 而后给发布者增加一个缓存列表，用于寄存回调函数来告诉订阅者

3. 最初就是公布音讯，发布者遍历这个缓存列表，顺次触发外面寄存的订阅者回调函数

// 定义一个发布者

var shoeObj ={}

// 有一个列表用来寄存函数

shoeObj.list=[]

// 减少订阅者

shoeObj.listen =function(key,fn){​        if(!this.list[key]){​            this.list[key]=[]

​        }

​        this.list[key].push(fn)

}

// 公布音讯

shoeObj.trigger =function(){

// 取出这个 key

var key =Array.prototype.shift.call(arguments)

var  fns = this.list[key]



// 遍历这个数组 而后执行这个函数

if(!fns || fns.length ==0){​    return}

​    for(var i =0,fn; fn = fns[i++]){​            fn.apply(this,arguments)

}

}

// 订阅

shoeObj.listen('red',function(size){​    console.log('小红订阅的尺码是 ${size}');

})



shoeObj.listen('black',function(size){​    console.log('小明订阅的尺码是 ${size}');

})

// 移除订阅

if(!fns){return false;}

if(!fn){fns && (fns.length = 0);

}else{​    for(var i =fns.length -1 ;i>=0;i--){​    var _fn=fns[i];

​    if(_fn === fn){

​    // 移除这个数组

​        fns.splice(i,1)

}

}

}

// 公布

shoeObj.trigger('red'，'37')

shoeObj.tigger('black'，'42')