发布订阅模式

发布订阅(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')

你可能感兴趣的:(前端javascript)