JS设计模式之观察者模式

定义：观察者模式（Observer）是软件设计模式的一种，也称为模型（Model）-视图（View）模式、源-收听者（Listener）模式或从属者模式。在这种模式中，一个目标物件（即被观察对象）管理所有相依于它的观察者物件，并在它本身的状态改变时主动发出通知。这通常是通过调用各观察者所提供的方法来实现的。

重点理解：观察者模式包含观察目标和观察者两个对象
            一个目标可以有任意数目与之相依赖的观察者
            一旦观察目标的状态发生改变，所有的观察者都将得到通知

ES5写法：

定义一个主体类，add方法用来添加观察者，notify用来通知观察者，remove用来移除观察者，接着我们定义一个观察者类

根据观察者模式的定义，一个目标物件（即被观察对象）管理所有相依于它的观察者物件，并在它本身的状态改变时主动发出通知。这通常是通过调用各观察者所提供的方法来实现的。

首先我们要先添加观察者

添加完毕后，当我们的目标物件（Subjecr）本身状态改变时发出通知，控制台或者JS输出subject.notify()方法，通过这个方法去发出通知，此时，根据上图可以看出我们有两个观察者，observer1和observer2，这两个观察者已经被添加到了主体中，此时控制台就会输出

此时我们可以很清晰的看到两个观察者都触发了更新方法，这就是简单的观察者模式，接着如果我们用到实战当中，例如根据菜单去添加面包屑。

当我点击首页时，右边黄色内容区域就会出现

此时我们可以看到路径和右边黄色区域的内容都发生了改变，根据观察者模式，我们来判断谁是主体谁是观察者，首先点击首页这个操作，就会触发一个function，这个操作其实就是我们的主体状态发生了改变，改变后通知了我们的两个观察者，第一个是路径，第二个是右边黄色区域，两个观察者都接收到了更新通知，并且就发生了改变。

具体代码如下：

html

css

js

根据代码我们可以看到，首先创建了一个观察目标主体对象（Subject），并且创建了两个观察者，分别是observe1和observer2，并且把观察者添加到我们的主体对象中，此时去获取ul下的所有li节点，并循环，当我们点击其中一个节点（例如首页）的时候就会触发主体对象的通知更新方法，然后触发观察者类中的update方法，并且通过传入的data，也就是我们li标签里的内容，赋值给这两个观察者元素文本，就可以让数据层发生改变同时重新渲染了视图层。这就是观察者模式的用法，但是此时观察者模式有一个缺陷，观察者模式虽然实现了对象间依赖关系的低耦合，但却不能对事件通知进行细分管控，如筛选通知，指定主体事件通知等，所以我们就在普通观察者模式的基础上增加了一个环节，变成我们的发布订阅者模式，详情请看发布订阅者模式。