JS设计模式之观察者模式（发布订阅者模式）

接上文观察者模式，我们在原先观察者模式的基础上增加了一个环节：

发布订阅模式（Publish-Subscribe Pattern）是一种消息范式，用于实现消息的发布者和订阅者之间的解耦。在这种模式中，消息的发送者（发布者）不会将消息直接发送给特定的接收者（订阅者），而是将发布的消息分为不同的类别。订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，而无需了解哪些发布者存在。

根据上文和图片对于观察者模式，我们可以看到观察者是被add方法添加到主体中去的，但是在发布订阅者模式中，对观察者模式进行了解耦，发布者（Publisher）发布消息给调度中心（Event Channel），根据不同的类型（例如：click，mouseover等）触发对应的订阅者（Subscriber）此时我们可以看到这种情况下，就可以解决对事件通知进行细分管控，如筛选通知，指定主题事件通知。

根据上述的思想，我们来看以下代码：

PubSub是一个中心调度，在这个对象里面，我们定义了一个list，用来作为有几个观察者的容器，我们的发布者通过publish()方法来实现发布消息，发布者通过subscribe（）方法来实现在中心调度器中，添加观察者

根据上图代码我们可以看到发布中通过中心调度器中的subscribe方法将两个观察者添加到了中心调度器中，此时PubSub里面的list就变成了

当主体的状态发生改变的时候，发布者就通过调用publish()方法，发布消息，去触发执行testA（）和testB（）两个方法。

这个就是简单的发布订阅者模式的理解了，接下来如果运用到实际使用的话

首先还是先写一个中心调度器大对象，里面包含了，发布消息方法，添加观察者方法和取消观察者方法，其实也叫做添加订阅者方法和取消订阅方法，先说publish方法，我们把事件类型和数据传入到里面，该方法首先就会判断，观察者，也就是订阅者容器里面有没有方法，如果没有的话就直接返回，如果有的话就会使用foreach进行遍历，并且触发执行该订阅者里面的所有方法。

第二个是添加订阅者，添加订阅者也要进行判定，首先要看需要添加的订阅者是否存在，如果不存在，就给该订阅者一个数组，用来存储订阅的方法，如果该订阅者已经存在，就直接在数组里面添加新增的订阅者方法即可

第三就是取消订阅了，首先还是判断需要取消的订阅者是否存在，如果不存在就直接返回，如果存在的话，接着看用户传进来的参数，是否包含了订阅者方法，如果不包含，就说明用户是想直接取消这个订阅者，而不是只取消该订阅者里面方法，这里我们使用了短路求值。如果 this.messagep[type] 是“false”就表示用户需要取消的订阅者内部没有订阅者方法，此时就什么都不做，因为订阅者方法为空，也取消不了。如果为true，就说明，这个订阅者内部有方法，此时这会导致所有现有的数组元素都被“删除”。如果用户传入的参数包含了回调函数方法，那就是证明用户只想取消该订阅者中的某个方法。使用filter过滤器，符合条件的返回，不符合条件的就过滤掉。

我们在实际使用的时候首先还是添加订阅者，和订阅者方法，此时可以看到我们添加了两个订阅者，分别是订阅者A和订阅者B，并且给两个订阅者都添加了订阅者方法，此时订阅者A中有一个数组，数组方法包含了testA和testB而订阅者B中只有一个订阅方法就是testB，接着在浏览器中进行调用：

此时可以看到message，也就是中心调度器PubSub里有两个订阅者，分别是订阅者A和订阅者B，并且给两个订阅者都添加了订阅者方法，当观察主体对象发生改变的时候中心调度器就会触发publish（）方法告知所有订阅者，此时订阅者就会触发订阅者里面的订阅方法去做出改变，如下图所示

以上就是发布订阅者的使用方法了，接下来实战介绍以下在面包屑案例中，如何使用发布订阅者模式去监听发布订阅

html部分

css部分

js部分

首先还是中心调度器

接着是订阅者方法：

实际使用：

根据上述图我们可以看到，我们给中心调度器添加了一个订阅者，名字叫UpdateBread意译为更新面包屑，并且给这个订阅者添加了一个订阅者方法，该方法可以把传入的data赋值文本内容给我们右侧区域的黄色内容，也就是类名为.bread的元素。

添加完订阅者后我们开始调用，首先获取到了所有li标签，并且给每个li标签都绑定了click点击事件，点那个，发布者就告诉中心调度处理器那个li标签状态发生改变并且发布者通过调用终端调用中心的publish方法，发布消息，效果图如下所示：

当我点击首页的时候，就使用中心调度发送消息了，并告知消息为首页，此时中心调度就触发了UpdateBread这个订阅者下的所有订阅方法，输出了，我是订阅者，首页，并且把首页这个文本内容渲染到了.bread黄色区域的元素上。

以上就是解耦后的观察者模式，发布订阅者模式的使用方法和案例了。