深入理解Javascript中的观察者模式

简介

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。讲道理，如果我们写的不是稍微底层的代码，可能不会用到它。 但是有了它会让代码更灵活，更加规整，减少冗余代码，方便分模块，分功能开发。

使用观察者模式的好处：

支持简单的广播通信，自动通知所有已经订阅过的对象。 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

引入

在前端业务中，可能用的比较多的地方可能就是自定义事件了。
其实浏览器的事件也是观察者模式

div.onclick = function click() { console.log('click')}

这里function click 订阅了 div 的click 事件，当我们的鼠标点击操作，事件发布，对应的function就会执行。这个function click 就是一个观察者。

具象化理解

其实单纯的看代码实现，也可以理解。但是万物都是有联系的，这些编程模式设计之初也是来源于生活经验吧，所以，具象的理解也是很重要的体验。

我们举一个结婚办酒席的例子。比如你的一个好朋友要结婚了，'结婚'这件事情不是天天发生，一辈子就那么一… 两次(maybe more)，所以我们的'去参加他的婚礼'肯定不是天天发生，只是在特定的时候。我肯定不能天天去问他，'今天你结婚吗，我来参加酒席啊'。一次两次还行，天天问，sb啊。假如是一个找不到对象的单身汪，被你天天这么问，还不得杀了你。。

那这里就需要有一个事件发布了，也就是'通知你'。

我作为一个观察者，去订阅他'结婚' 的这个事件，就是我们是好朋友，他的婚礼我肯定去，我们已经说好了。那么我就是观察者，'我去参加婚礼'就是对应而来的动作。当我订阅了'结婚' 这个事件，我就不需要天天去问他了，我该干嘛干嘛，该去泡妞，约饭，看电影，约… 就干嘛。

当他发布'结婚' 这个事件，通知到我了，我就在特定的时候，去do'参加婚礼酒席'这个行为function …

//模拟代码//我订阅了'marry' 事件wo.on('marry',function(){ //去参加婚礼酒席})//然后他发布。比如浏览器的点击// 对应的我的 function就会执行

解耦/模块/功能

其实在代码中是需要一个类似于中间服务的,管理发布订阅的中间者。

比如浏览器中的事件处理程序，他提供了订阅的接口，然后接收'事件' 信号 发布给你。让js代码跟浏览器之间有了联系，互动。而本来是两个不同的东西。