什么是发布订阅设计模式（Publish / subscribe ），又叫观察者模式？那这种模式能干啥？怎么实现的发布订阅？客官往里走，里面都有：
发布订阅设计模式：
专业名词解释发布订阅:
它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
大白话解释发布订阅：
有一天我想吃火锅了，但是没有钱怎么办，我就想了个办法，我通知了几个朋友说 在规定的那一天我想吃火锅，让A拿一点肉，B拿一点菜，C拿一点料，D拿一点海鲜，我就是相当于是这个发布者，等到了规定的时间了，我的朋友们依次执行了我给他们布置的任务，我的朋友们就是订阅者，ABCD全都到齐了在加上我，开吃。
简单介绍发布订阅
以上是在不使用发布订阅模式下简单的实现及介绍了一下发布模式是一种什么形式。
这火锅也吃上了，真香哈，但是吃着吃着，你发现料吃完了，这怎么办，于是又找了个朋友说吃火锅让买点料过来，于是乎这位E朋友也成为了订阅者的一员，那就等吧，什么时候E来了，才能再次的吃火锅，这是用生活比喻代码，这是代码少的情况下可以这么写，如果后来的发现代码越来越多还这么写方便嘛？
在这里要抛出另一个知识点，JQ的事件池机制，发布订阅也许就是按照事件池完善版本哦。
JQ版本实现发布订阅模式：附上图片加代码
JQ实现发布订阅图
<body>
<button id="btn">规定时间</button>
</body>
<script>
// ====> 创建事件池 $.Callbacks()
let $pond1 = $.Callbacks();
$('#btn').click(function(){
// ===> fire 点击的时候通知事件池中的方法执行
$pond1.fire(100,200); // 可以传递参数 参数会传到每个在事件池中的函数
})
function fnA(n,m){console.log("肉",n+m);}
function fnB(n,m){ console.log("菜",n+m); }
function fnC(){ console.log("料");}
function fnD(){ console.log("海鲜"); }
// ===> 把需要做的事情陆续添加到事件池中 $pond1.add(func)
// ===> 删除方法 $pond1.remove(func)
$pond1.add(fnA);
// $pond1.add(fnA); // ==== JQ没有做去重
$pond1.add(fnB); $pond1.add(fnC); $pond1.add(fnD); // 添加函数到事件池
function fnE(){console.log("重新买料"); }
$pond1.add(fnE);
/* 这样的好处就是随用随加 不管在那，只要你想要一起执行 就添加进去就OK*/
</script>
但是注意,JQ事件池并没有做去重，也就是说一个方法可以添加多次。
那为什么上面有说按照JQ事件池完善的方案呢？那就要说说ES6方法自己实现一个发布订阅库了，来了。
ES6实现发布订阅库：附上图片和代码
ES6实现发布订阅模式
调用方法
没有解决数组塌陷的代码：
let _subscribe = (function () {
class Sub { // => SUB：发布订阅类
constructor() { this.$pond = []; }
add(func) {
let flag = this.$pond.some(item => {
return item === func;
})
!flag ? this.$pond.push(func) : null;
}
remove(func){
let $pond = this.$pond;
for(let i = 0; i <$pond.length; i++){
let item = $pond[i];
if(item === func){
$pond.splice(i,1); // 不改变原来元素的顺序移除 splice
break;
} } }
fire(...args){
let $pond = this.$pond;
for(let i = 0; i<$pond.length;i++){
let item = $pond[i];
item.call(this,...args);
} } }
return function subscribe(){ return new Sub(); }
})();
什么是数组塌陷？来看一张图
数组塌陷原因图
既然知道了数组塌陷的原因，那解决方案就简单了：附带图片及代码
解决数组塌陷图
$pond[i] = null;
break;
if(typeof item !== 'function'){ $pond.splice(i,1); i--; continue; }
代码就不全部粘贴了，感兴趣按照图片位置自己粘贴吧，免得说蹭文字数量，哈哈。
总结：设计模式这是一种思想，结合思想写项目代码可以增加可维护性，耦合性，今天讲的发布订阅模式，凡是在项目中符合，当某一个时刻要做好多事情的时候就可以想到发布订阅模式，如果理解了也对观看 Vue 响应式原理有所帮助哦。
还有那句话：如有不对之处及不周之处请大佬们指出，也希望对一些人有所帮助，咱们下次再会！
扫一扫
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
