Javascript设计模式理论与实战：观察者模式

观察者模式主要应用于对象之间一对多的依赖关系，当一个对象发生改变时，多个对该对象有依赖的其余对象也会跟着作出相应改变，这就很是适合用观察者模式来实现。使用观察者模式能够根据须要增长或删除对象，解决一对多对象间的耦合关系，使程序更易于扩展和维护。

基础知识

观察者模式定义了对象间的一种一对多依赖关系，每当一个对象发生改变时，其相关依赖对象皆获得通知并被进行相应的改变。观察者模式又叫作发布-订阅模式。生活中有不少相似的关系，好比微信公众号订阅，多个读者订阅一个微信公众号，一旦公众号有更新，多个读者都会收到更新，而这种状况在应用程序中也很是常见，js绑定各类事件本质上就是观察者模式的实现。
观察者模式是一个很是有用的设计模式，它主要有两个角色组成：
（1）目标对象：做为一对多关系中的一，能够用来管理观察者的增长和删除
（2）观察者对象：观察目标对象，一旦目标发生改变则作出相应的反应

观察者模式的实现

基本示例

在Web开发中，咱们常常遇到这种状况，ajax请求数据后，要同时更新数据到页面的不一样部分中，这种状况咱们能够最直接的在ajax的回调中更新页面，可是若是要更新的位置不少，咱们就要去修改回调函数，这样代码的维护性和扩张性不高，这种状况下，咱们就能够用观察者模式来实现。
首先，须要一个最基本的目标对象，咱们定义以下：

 1 function Subject() {
 2     this.observers = [];
 3 }
 4 Subject.prototype = {
 5     constructor: Subject,
 6     subscribe: function (fn) {
 7         this.observers.push(fn);
 8         return this;
 9     },
10     unsubscribe: function (fn) {
11         this.observers = this.observers.filter(function (item) {
12             if (item !== fn) {
13                 return item;
14             }
15         });
16         return this;
17     },
18     fire: function (data, context) {
19         this.observers.forEach(function (item) {
20             item.call(context, data);
21         });
22         return this;
23     }
24 };

目标对象Subject中有一个数组，这个数组保存观察者列表，而目标对象提供三个方法：观察对象，取消观察对象，触发对象更新。
咱们经过subscribe方法增长观察者，保存到observers数组中，若是有须要能够经过unsubscribe方法取消订阅，而后更新数据时调用fire方法触发，从而通知各个观察者进行相应处理。
假设咱们页面有一个主视图和一个侧视图，两个视图都要进行相应的修改，咱们能够定义两个对象以下：

1 function SideView() { }
2 SideView.prototype.render = function (data) {
3     console.log("Side data:" + data);
4 }
5 function MainView() { }
6 MainView.prototype.render = function (data) {
7     console.log("MainView data:" + data);
8 }

上面代码定义了两个对象，分别为侧视图和主视图，两个对象都有相应的渲染页面的方法render，而后咱们将两个方法添加到观察者列表中。

1 var subject = new Subject();
2 var sideView = new SideView();
3 var mainView = new MainView();
4 
5 subject.subscribe(sideView.render)
6 subject.subscribe(mainView.render);
7 subject.fire("test");

经过调用fire方法，传入“test”，从而触发两个render函数。从这段代码中，咱们能够很轻松地经过subscribe来添加观察者对象，而没必要每次都去修改fire方法。

jQuery中的观察者模式

jQuery中实现观察者模式很是方便，简短的几句代码就能够实现

 1         (function ($) {
 2             var obj = $({});
 3             $.subscribe = function () {
 4                 obj.on.apply(obj, arguments);
 5             }
 6             $.unsubscribe = function () {
 7                 obj.off.apply(obj, arguments);
 8             }
 9             $.fire = function () {
10                 obj.trigger.apply(obj, arguments);
11             }
12         })(jQuery);

在jQuery中，经过on方法来绑定事件，off来移除事件，trigger来触发事件，本质上就是一种观察者模式。上面代码中，咱们经过一个obj对象来保存观察者对象，咱们只要像平时绑定事件同样使用就能够，以下：

1 $.subscribe("render", function () {
2     console.log("test");
3 })
4 $.subscribe("render", function () {
5     console.log("test2");
6 })
7 $.fire("render");

这段代码分别输出test和test2.咱们绑定了两个处理函数到render上，而后经过fire触发render事件，这就实现了观察者模式一对多依赖的特色。

总结

观察者模式是一种很经常使用的设计模式，由于咱们的应用程序中涉及到依赖关系的很是多。常见的好比消息通知，向用户发送一个消息须要同时通知到站内信，邮件，短信等多种消息，这种一对多的状况很是适合使用观察者模式来实现。使用观察者模式的关键是在于理清目标对象和观察者对象，目标对象经过一个数组对观察者对象进行管理，更新数据的时候再循环调用观察者对象，从而实现观察者模式。

原文地址：http://luopq.com/2015/11/24/design-pattern-observer/