ObserverMode主要用在对象之间一对多的依赖关系中。当一个对象改变时，依赖于该对象的多个其他对象也会随之改变。非常适合使用观察者模式来实现相应的变化。使用观察者模式可以根据需要添加或删除对象，解决一对多对象之间的耦合关系，使程序更易于扩展和维护。基础知识观察者模式定义了对象之间一对多的依赖关系。每当一个对象发生变化时，它的相关依赖对象就会得到通知并相应地发生变化。观察者模式也称为发布-订阅模式。生活中有很多类似的关系，比如微信公众号订阅，多个读者订阅一个微信公众号，一旦公众号有更新，多个读者都会收到更新，这种情况在微信中也很常见application常见的js绑定各种事件本质上是观察者模式的实现。观察者模式是一种非常有用的设计模式，它主要有两个作用：（1）目标对象：作为一对多关系中的一种，可以用来管理观察者的增删改查（2）观察者objects:观察target对象，一旦target发生变化就做出相应的反应这种情况下我们可以直接在ajax回调中更新页面，但是如果要更新的位置很多，就得修改回调函数，这样代码不易维护和扩展。这种情况下，我们可以使用观察者模式来实现。首先，我们需要一个基本的目标对象，我们定义如下：);returnthis;},unsubscribe:function(fn){this.observers=this.observers.filter(function(item){if(item!==fn){returnitem;}});returnthis;},fire:function（数据，上下文）{this.observers.forEach（函数（项目）{item.call（上下文，数据）;}）;returnthis;}};目标对象Subject中有一个数组，里面保存着观察者列表，目标对象提供了三种方法：观察对象、取消观察对象、触发对象更新。我们通过subscribe方法添加观察者，并保存在观察者数组中。如果需要，我们可以通过unsubscribe方法取消订阅，然后在数据更新时调用fire方法触发，从而通知各个观察者进行相应的处理。假设我们的页面有一个主视图和一个侧视图，两个视图都需要做相应的修改。我们可以定义两个对象如下：data){console.log("MainViewdata:"+data);}上面的代码定义了两个对象，分别是侧视图和主视图，这两个对象都有对应的方法render来渲染页面，然后我们把这两个相加观察者列表的方法。varsubject=newSubject();varsideView=newSideView();varmainView=newMainView();subject.subscribe(sideView.render)subject.subscribe(mainView.render);subject.fire("test");通过调用fire方法，通过输入“test”，从而触发两个渲染函数。从这段代码中，我们可以很方便的通过subscribe添加观察者对象，而不必每次都去修改fire方法。jQuery中的观察者模式在jQuery中实现观察者模式非常方便，只需短短几行代码即可实现(function($){varobj=$({});$.subscribe=function(){obj.on.apply(obj,arguments);}$.unsubscribe=function(){obj.off.apply(obj,arguments);}$.fire=function(){obj.trigger.apply(obj,arguments);}})(jQuery);在jQuery中，on方法用于绑定事件，off用于移除事件，trigger用于触发事件，本质上是一种观察者模式。在上面的代码中，我们使用了一个obj对象来保存观察者对象，我们只需要像平时绑定事件一样使用即可，如下：$.subscribe("render",function(){console.log("test");})$.subscribe("render",function(){console.log("test2");})$.fire("render");此代码分别输出test和test2。我们将两个进程函数绑定到render，然后通过fire触发render事件，实现了观察者模式的一对多依赖。总结观察者模式是一种非常常见的设计模式，因为我们的应用涉及到很多依赖关系。常见的是消息通知。给用户发送消息需要同时通知内部消息、邮件、短信等多种消息。这种一对多的情况很适合使用观察者模式来实现。使用观察者模式的关键是明确目标对象和观察者对象。目标对象通过数组管理观察者对象，当数据更新时，再次调用观察者对象，实现观察者模式。原文地址：http://luopq.com/2015/11/24/design-pattern-observer/
