介绍

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

使用观察者模式的好处：

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

正文（版本一）

JS里对观察者模式的实现是通过回调来实现的，我们来先定义一个pubsub对象，其内部包含了3个方法：订阅、退订、发布。

var pubsub = {};    var topics = {}, // 回调函数存放的数组        if (!topics[topic]) {        setTimeout(function () {            while (len--) {        return true;    };        if (!topics[topic]) {        var token = (++subUid).toString();//发布通知//发布通知//退订//再发布一次，验证一下是否还能够输出信息//测试var f2 = function (data) {o.subscribe(f1);o.update("Tom回来了！")//退订f1var user = {observer.make(blogger);var mm = {//退订//另外一个对象的订阅    var o = $({});    $.subscribe = function () {    $.unsubscribe = function () {    $.publish = function () {} (jQuery));

调用方法比上面3个版本都简单：

//回调函数//订阅$.unsubscribe("/some/topic", handle); // 退订//订阅$.publish("/some/topic", ["a", "b", "c"]); // 输出abc//退订（退订使用的是/some/topic名称，而不是回调函数哦，和版本一的例子不一样
$.unsubscribe("/some/topic"); 

可以看到，他的订阅和退订使用的是字符串名称，而不是回调函数名称，所以即便传入的是匿名函数，我们也是可以退订的。

总结

观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。

总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

参考地址：

https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/observer.html

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript

https://gist.github.com/661855

同步与推荐

本文已同步至目录索引：深入理解JavaScript系列

深入理解JavaScript系列文章，包括了原创，翻译，转载等各类型的文章，如果对你有用，请推荐支持一把，给大叔写作的动力。

原标题：深入理解JavaScript系列（32）：设计模式之观察者模式

关键词：JavaScript,设计模式,观察者,Observer