资源描述：
《javascript观察者模式(经典)_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、JavaScript观察者模式（经典）Observer模式也叫观察者模式，是由GoF提出的23种软件设计模式的一种。Observer模式是行为模式之一，它的作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态。Observer模式的概念Observer模式是行为模式之一，它的作用是当一个对象的状态发生变化时，能够自动通知其他关联对彖，自动刷新对彖状态。Observer模式提供给关联对象一种同步通信的手段，使某个对象与依赖它的其他对象之间保持状态同步。Observer模式的角色：Sub
2、ject（被观察者）被观察的对象。当需要被观察的状态发牛变化时，需要通知队列中所有观察者对象。Subject需要维持（添加，删除，通知）一个观察者对象的队列列表。ConereteSubject被观察者的具体实现。包含一些基木的屈性状态及其他操作。Observer（观察者）接口或抽彖类。当Subject的状态发主变化时，Observer对彖将通过一个callback函数得到通知。ConcreteObserver观察者的具体实现。得到通知后将完成一些具体的业务逻辑处理。观察者模式（又叫发布者-订阅者模式）应该是
3、最常用的模式之一.在很多语言里都得到大量应用.包描我们平时接触的doin事件•也是js和doin之间实现的一种观察者模式.div.onclick=functionclick（）{alert（”click，）}只要订阅了div的click事件.当点击div的时候，functionclick就会被触发.那么到底什么是观察者模式呢.先看看生活中的观察者模式。好莱坞有句名言.“不要给我打电话，我会给你打电话”・这句话就解释了一个观察者模式的來龙去脉。其中“我”是发布者，“你”是订阅者。再举个例子，我来公司而试的时候
4、，完事Z后每个而试官都会对我说：“请留下你的联系方式，有消息我们会通知你”。在这里“我”是订阅者，面试官是发布者。所以我不用每天或者每小吋都去询问面试结果，通讯的主动权掌握在了面试官手上。而我只需要提供-个联系方式。观察者模式可以很好的实现2个模块之间的解耦。假如我正在一个团队里开发一个html5游戏.当游戏开始的时候，需要加载一些图片素材。加载好这些图片之后开始才执行游戏逻辑.假设这是一个需要多人合作的项目.我完成了Gamer和Map模块，而我的同事A写了一个图片加载器loadimage.loadimag
5、e的代码如下loadlmagc(imgAry,function(){Map.init();Gamer,init();})当图片加载好之后，再渲染地图，执行游戏逻辑•嗯，这个程序运行良好.突然有一天，我想起应该给游戏加上声音功能.我应该让图片加载器添上一行代码.loadimage(imgAry,function(){Map.init();Gamer・init();Sount.init();})可是写这个模块的同事A去了外地旅游.于是我打电话给他，喂.你的loadTmage函数在哪，我能不能改一下，改了之后有没
6、有副作用.如你所想,各种不淡定的事发生了.如果当初我们能这样写呢：loadimage.listen("ready，,function(){Map.iniI();})loadlmagc.1istcn("ready',function(){Gamer・init();})loadTmage.1isten("ready',function(){Sount.init();})loadimage完成Z后，它根本不关心将来会发生什么，因为它的工作已经完成了.接下来它只要发布一个信号.loadTmage.trigger("
7、ready，);那么监听了loadlmagc的'rcady，事件的对象都会收到通知.就像上个面试的例了•面试官根本不关心面试者们收到面试结果后会去哪吃饭.他只负责把面试者的简丿力搜集到一起.当而试结果岀来时照着简丿力上的电话挨个通知.说了这么多概念，来一个具体的实现.实现过程其实很简单.面试者把简历扔到一个盒子里，然后面试官在合适的吋机拿着盒子里的简历挨个打电话通知结果.Events=function(){varlisten,log,obj,one,remove,trigger,_this;obj二{};_
8、this=this;listen=function(key,cvcntfn){//把简历扔盒子，key就是联系方式.varstack,_ref;//stack是盒子stack二(_ref二obj[key])!二null?_ref:obj[key]二[];returnstack,push(eventfn);};one=function(key,eventfn){remove(key);returnlisten(ke
