仙居建设局网站,网页制作与网站建设填空题,济南传承网络技术有限公司,动画设计思路怎么写订阅发布模式的介绍
发布订阅模式#xff0c;它定义了一种一对多的关系#xff0c;可以使多个观察者对象对一个主题对象进行监听#xff0c;当这个主题对象发生改变时#xff0c;依赖的所有对象都会被通知到。
在生活中我们常常遇到这样一种情况#xff0c;我们在使用新…订阅发布模式的介绍
发布订阅模式它定义了一种一对多的关系可以使多个观察者对象对一个主题对象进行监听当这个主题对象发生改变时依赖的所有对象都会被通知到。
在生活中我们常常遇到这样一种情况我们在使用新闻APP看新闻的时候每个人喜欢的新闻类型各不一样比如我喜欢NBA但是我们总不可能一天24小时在手机上一遍又一遍的刷新我们就会去新闻频道中选择NBA专栏来收藏当勇士或者湖人有最新消息就会通知我们去观看。
当然从上面的场景中是一个典型的发布订阅模式APP的NBA专栏属于发布者像我一样广大爱好篮球的小伙伴梦就属于订阅者当一有最新的消息它们就会发布给我们。
实际用途
1.在jquery中很多地方都有发布订阅的踪迹例如事件中on和trigger中封装的方法。
2.尤大大的Vue,中子父组件通信使用的emit()和on()方法使得组件得到解耦开发更加高效。
如何实现订阅发布模式
1、首先想好谁是发布者比如上边的APP的NBA专栏就是发布者
2、然后给发布者添加一个缓存列表用于存放回调函数来通知订阅者比如上面的我们球迷爱好者收藏了NBA专栏相当于向发布者注入了通知我们的函数
3、最后就是发布消息发布者遍历这个缓存列表依次触发订阅的函数。
表捉急端起小板凳先看一下这个简单的发布订阅模式
let NBAcol{};//自定义一个NBA专栏对象
NBAcol.list[];// 这里放一个列表用来缓存订阅者的回调函数
NBAcol.onfunction(fun){this.list.push(fun); //把fn先存到列表中
};
//发布事件
NBAcol.emitfunction(){this.list.forEach(cb {cb.apply(this, arguments);});// 当发布的时候再把列表里存的函数依次执行
};
//小明的订阅NBA专栏
NBAcol.on(function(team){console.log(我订阅的球队是 team)
})
//小李的订阅NBA专栏
NBAcol.on(function(team){console.log(我订阅的球队是 team)
})
NBAcol.emit(湖人);
NBAcol.emit(勇士);
/*
我订阅的球队是湖人;
我订阅的球队是湖人;
我订阅的球队是勇士;
我订阅的球队是勇士;
*/上面就实现了一个简单的订阅发布模式不过从打印结果来看有些尴尬因为其实小明只想订阅湖人小李要订阅勇士。可是专栏都给他们推送了显然不太合理。之所以出现这种情况是因为在执行on方法的时候将订阅函数列表中的函数依次都执行了。所以我们要对代码进行改造我们可以先增加一个key使订阅者只订阅自己感兴趣的消息。
let NBAcol{};//自定义一个NBA专栏对象
NBAcol.list{};// 这里放一个列表用来缓存订阅者的回调函数
NBAcol.onfunction(key,fun){// 如果还没有订阅过此类消息给该类消息创建一个缓存列表if(!this.list[key]){this.list[key][];}this.list[key].push(fun); //把fn先存到列表中
};
//发布事件
NBAcol.emitfunction(){let keyArray.prototype.shift.call(arguments);// 取出消息类型名称let funsthis.list[key];//匹配对应的回调函数的结合if(!funs||funs.length0){//如果没有订阅过消息则return;return;};funs.forEach(fun {fun.apply(this, arguments);});// 当发布的时候再把列表里存的函数依次执行
};
//小明的订阅NBA专栏
NBAcol.on(xiaomin,function(team){console.log(我订阅的球队是 team)
})
//小李的订阅NBA专栏
NBAcol.on(xiaoli,function(team){console.log(我订阅的球队是 team)
})
NBAcol.emit(xiaomin,湖人);
NBAcol.emit(xiaoli,勇士);
/*
我订阅的球队是湖人;
我订阅的球队是勇士;
*/这样子就可以啦这个订阅发布的核心功能已经体现了。
如何取消事件的订阅
比如上面的列子假如我们订阅了很多东西不喜欢的时候我们要取消订阅该怎么办呢看如下代码 NBAcol.removefunction(key, fun) {// 这回我们加入了取消订阅的方法let funs this.list[key];// 如果缓存列表中没有函数返回falseif (!funs) return false;// 如果没有传对应函数的话// 就会将key值对应缓存列表中的函数都清空掉if (!fun) {funs (funs.length 0);} else {// 遍历缓存列表看看传入的fun与哪个函数相同// 如果相同就直接从缓存列表中删掉即可funs.forEach((cb, i) {if (cb fun) {funs.splice(i, 1);}});}}// 取消dog方法的订阅NBAcol.remove(xiaoli,function(team){console.log(我订阅的球队是 team)});这样就可以取消订阅啦但是实际的开源代码中封装远比这要复杂比如要考虑订阅数量还有多模块订阅的封装等等所以在这里我们还得在实际的业务模块中详细考虑。
发布订阅模式的缺点
当然一个任何一个东西都是有两面性的同样发布订阅模式存在以下问题
1、创建订阅者需要消耗一定的时间和内存。
2、虽然可以弱化对象之间的联系如果过度使用的话反而使代码不好理解及代码不好维护等等。
