共计 1741 个字符，预计需要花费 5 分钟才能阅读完成。
原文链接跳转
好长时间没有写文章了，刚好年底了，就把前段时间在我的项目中用到和学到的技术计划写下来，一个是公布订阅模式，还有一个就是队列在我的项目中的利用了，对于队列在下一篇文章。
之前也有理解过公布订阅，但在我的项目中理论应用也是第一次，这个我的项目重构，小组大佬引入了这个计划！！这次也算是学习到了，如何把一些概念援用到我的项目中，正当解决软件我的项目的理论问题。[以下内容参考：javascript 设计模式与开发实际]()
常见的订阅公布
在咱们的日常生活中，就能够找到订阅公布，例如咱们在 B 站中罕用的的订阅服务，你在下面订阅了一个 up 主，当 up 主更新了视频之后，你就会收到对应的告诉。当然，这个告诉的模式是有各种各样的，这个就是咱们这里要探讨的。订阅者 ——> 更新数据 ——> 发布者告诉，这样的一个流程，就是最最在生活中一个常见的例子了。
那在前端我的项目中，咱们是否有用到公布订阅嘛？
document.addEventListener('click', ()=> {console.log('一号监听器')})
document.addEventListener('click', ()=> {console.log('二号监听器')})以上代码对点击事件进行了两次监听，它们相互不会笼罩，这也是在前端我的项目中，最常见的一个例子????。从这个代码中，咱们能够发现，addEventListener的作用就是订阅（监听），但这里有两个监听，阐明进行屡次监听时，即便监听的都是 click 类型的事件，但也不会被笼罩，阐明有一个列表，帮咱们把监听都进行了保留，而后再同时触发。好的，咱们也根据咱们剖析的，来编写一个繁难的订阅公布器（监听公布器）。
实现繁难的订阅公布
首先须要一个订阅器（监听器），而后须要一个列表进行缓存，最初须要告诉触发（公布）：
// 缓存
let _cache = {};
// 监听器（订阅）function addLister(type, fn) {if(!_cache[type]) {
// 类型不存在，就是创立一个缓存列表
_cache[type] = [];}
// 回调放入缓存
_cache[type].push(fn);
}
// 触发器（公布）function trigger(type, option = {}) {if(!_cache[type]) {
// 类型不存在，间接完结
return false;
}
let list = _cache[type];
for(let i = 0 ; i < list.length ; i++) {
// 遍历缓存列表，公布音讯告诉
list[i](option);
}
}
// 订阅
addLister("click", (e)=> {console.log(e.a);});
addLister("click", (e)=> {console.log(e.b);});
// 公布
trigger("click", {a: 1, b: 2})好啦，一个繁难的订阅公布器就能够啦！能够试试这一段代码，是不是曾经能够间接应用了，满满的成就感。个别在订阅公布器都是挂载在全局下的，那么咱们只须要把以上的函数封装成一个函数或者一个类就能够啦！！
是不是感觉以上的代码少了一点什么？订阅和公布都有了，如果咱们想勾销订阅怎么办，这里我不持续说了，心愿你本人能够去翻书或者查资料，他人给的毕竟不如本人做的，勾销订阅的具体实现，留待大家思考吧。至于如何在我的项目中应用，这个根本也不用说，因为在你的日常我的项目中，你就有在用哦！！[倡议间接看：javascript 设计模式与开发实际]()
应用场景和解决的问题
上面要说到的，就是订阅公布的应用场景，和解决的问题。当然，其实这能够演绎为一个问题。
这里我列举几个应用的场景：
1. 跨模块或跨组件的通信
2. 全局的音讯告诉
...... 等
更多的场景想不进去了。。。。。，心愿有人能够补充。我也是看书总结的，就不复制粘贴了，订阅公布模式的作用有两点：
1. 解耦;
2. 防止硬编码;解藕：防止我的项目不同的模块和组件的代码复杂度，多个模块的代码交错在一起；防止硬编码：不须要通过变量手动来强制批改一些状态；
对于设计模式，重要的是了解其思维，而后尝试是否能够使用到我的项目中去，因为只有应用的常识，才是活常识嘛。好了，我持续去看书了。
