2022年2022年观察者模式 .pdf

《2022年2022年观察者模式 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年观察者模式 .pdf（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、观察者模式第 15 章事件驱动的环境中， 比如浏览器这种持续寻求用户关注的环境中，观察者模式又名 发布者 订阅者 （publisher-subscriber ）模式是一种管理人与其任务之间的关系（确切地讲，是对象及其行为和状态之间的关系）的得力工具。 用JavaScript 的话来说， 这种模式的实质就是你可以对程序中某个对象的状态进行观察，并且在其发生改变时能够得到通知。在观察者模式中存在两个角色：观察者和被观察者。本书一般倾向于称其为发布者 和订阅者 。这种模式在 JavaScript 中有几种不同的实现方式， 本章将对其中的一些实现方式进行考察。不过我们首先要说明一下发布者和订阅者这两种

2、角色。下一节的例子以报业为例说明了观察者模式的工作方式。15.1示例：报纸的投送在报纸行业中，发行和订阅的顺利进行有赖于一些关键性的角色和行为。首先是读者。他们都是订阅者 （subscriber ） ，是与你我一样的人。我们消费数据并且根据读到的消息做出反应。我们可以选择自己的居住地点，让报社把报纸送到自己家中。这个活动中的另一个角色是发行方（publisher） 。他们负责出版诸如 San Francisco Chronicle、New York Times 和Sacramento Bee 这样的报纸。确定了各方的身份之后，我们就可以分析每一方的职责所在。作为报纸的订阅者，我们有一些事要做。

3、数据到来的时候我们收到通知。我们消费数据。然后我们根据数据做出反应。只要报纸到了订阅者手中，他们就可以自行处置。有些人读完之后会将其扔在一边，有些人会向朋友或家人转述其中的新闻， 甚至还有一些人会把报纸送回去。 总而言之，订阅者要从发行方 接收数据。发行方则要 发送 数据。在本例中，发行方也是投送方（deliver） 。一般说来，一个发行方很可能有许多订阅者，同样，一个订阅者也很可能会订阅多家报社的报纸。问题的关键在于，这是一种多对多的关系，需要一种高级的抽象策略，以便订阅者能够彼此独立地发生改变，而发行方能够接受任何有消费意向的订阅者。21515.1.1推与拉的比较对于报社来说， 只为给几个

4、订阅者投送报纸就满世界跑是不划算的。而纽约市的居民也不可能特意飞到旧金山去拿自己订的San Francisco Chronicle， 要知道这份报纸可以直接投送到他们家名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 10 页 - - - - - - - - - 198第 15 章 观察者模式门口。订阅者要想拿到报纸的话有两种投送方式可选：推或拉。在推环境中，发行方很可能会雇佣投送人员四处送报。换句话说，他们把自己的报纸推出去，让订阅者收取。在拉环境中，规模较小的本地报社可

5、能会在订阅者家附近的街角提供自己的数据，供订阅者“拉”。那些成长型发行方没有足够的资源进行大规模投送，因此采用拉方案， 让订阅者到当地的杂货店或自动售货机那里“拿”报，对于它们来说往往是个优化投送环节的好办法。15.1.2模式的实践在JavaScript 中有多种方法可以实现发布者 订阅者模式。在展示那些示例之前，我们先确保各种角色的扮演者（对象）及其行为（方法）都已就绪。订阅者可以订阅和退订。他们还要接收。他们可以在“由人投送（being delivered to ） ”和“自己收取（ receiving for themselves ） ”之间进行选择。发布者负责投送。他们可以在“送出（g

6、iving） ”和“由人取（ being taken from） ”之间进行选择。下面是一个展示发布者和订阅者之间的互动过程的高层示例。它是Sells方法（ Sellsian approach ）的一个示范。这种技术类似于测试驱动的开发（TDD ） ，不过它要求先写实现代码，就像API已经写好了一样。为了让这些代码成为可运转的真正实现，程序员需要完成各种该做的工作， API由此形成：216 这不是一个正式的术语，而是Don Box 发明的一个词，用来指Chris Sells 所说的一种开发方法。下面的代码中开头部分的注释中那个URL 就是该词的出处。译者注名师资料总结 - - -精品资料欢迎下

7、载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 10 页 - - - - - - - - - 15.1示例：报纸的投送 199 在这个模型中，可以看出发布者处于明显的主导地位。它们负责登记其顾客，而且有权停止为其投送。最后，新的报纸出版后它们会将其投送给顾客。上面的代码创建了一个新的可观察 （observable ）对象。它有三个实例方法：subscribe- Customer、unSubscribeCustomer和deliver。subscribeCustomer方法以一个代表订阅者的回调函数为参数。de

8、liver方法在调用过程中将通过这些回调函数把数据发送给每一个订阅者。下面的例子处理的是同一类问题，但发布者和订阅者之间的互动方式有所不同：217名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 10 页 - - - - - - - - - 200第 15 章 观察者模式在这个例子中， 发布者的创建方式和订阅者接收数据的方式没有多少改变，但拥有订阅和退订权的一方变成了订阅者。当然，负责发送数据的还是发布者一方。本例中的发布者是Publisher类的实例。它有一个delive

9、r方法。而作为订阅者的函数对象则拥有subscribe和unsubscribe两个方法。订阅者只是普通的回调函数，那两个方法是通过扩展Function的prototype而加入的。下面我们将一步一步地构建出符合需要的API。15.2构建观察者API 在明确了观察者模式中的核心成员之后，现在可以着手构建其API了。首先，我们需要一个发布者的构造函数，它为该类实例定义了一个类型为数组的属性，用来保存订阅者的引用：218 因为任何函数都是Function的实例，所以在Function.prototype中添加的新方法会被所有函数继承。当然，这里把subscribe和unsubscribe添加到 Fu

10、nction.prototype中只是为了省事，在实际项目中不应该这样做。译者注名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 10 页 - - - - - - - - - 15.2构建观察者API201 15.2.1投送方法所有Publisher实例都应该能够投送数据。只要把deliver方法添加到Publisher的prototype中，它就能够被所有Publisher对象共享：这个方法使用 JavaScript 1.6 中新增的数组方法forEach（参见“ Moz

11、illa 开发人员中心”网站http:/developer.mozilla.org/）逐一处理每一个订阅者。forEach方法会对一个“草垛（ haystack ） ”从头到尾访问一遍，把每一根“针（needle ） ” 、 “针”的索引和整个数组提供给一个回调方法。订阅者数组中的每根“针”都是一个回调函数，比如Joe、Lindsay和Quadaras。deliver方法把this用作返回值，因此可以对该方法进行链式调用（参见第6章） ，以连续不断地投送数据。15.2.2订阅方法下一步是给予订阅者订阅的能力：这段代码为Function的prototype添加了一个以Publisher对象为参数

12、的subscribe方法，因此所有函数都能调用这个方法。subscribe方法先定义了一个that变量，并把this赋给219这里所谓的“草垛”和“针”分别指数组及其元素。这里所说的回调函数，是指forEach方法的那个参数。这个回调函数本身又有三个参数，依次为当前数组元素（即“针”） 、当前数组元素的索引值、数组。本例中的那个回调函数是一个匿名函数，它只使用了第一个参数。注意，本段最后那句话“订阅者数组中的每根针都是一个回调函数”中的“回调函数”与前面说的那个回调函数不是一回事。译者注名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - -

13、 - 名师精心整理 - - - - - - - 第 5 页，共 10 页 - - - - - - - - - 202第 15 章 观察者模式它。后面用作数组的some方法参数的那个匿名函数将通过闭包机制访问到这个变量，从而访问到用以调用subscribe方法的那个函数对象。some也是JavaScript 1.6 中新增的数组方法， 它以一个回调函数为参数。some方法逐一访问数组的各个元素，并以其为参数调用那个回调函数。只要至少有一次调用回调函数时返回true，则some方法返回true，否则some方法将返回false。subscribe方法把some方法的返回值赋给变量alreadyEx

14、ists，然后根据这个变量的值决定是否为指定的发布者添加一个订阅者。最后，subscribe方法返回this值，以便支持该方法的链式调用。15.2.3退订方法unsubscribe方法可供订阅者用来停止对指定发布者的观察：有些订阅者在监听到某种一次性的事件之后会在回调阶段立即退订该事件。其做法大致如下：15.3现实生活中的观察者在现实世界中，观察者模式对于那种由许多JavaScript 程序员合作开发的大型程序特别有用。它可以提高 API的灵活性，使并行开发的多个实现能够彼此独立地进行修改。作为开发人员，你可以对自己的应用程序中什么是 “令人感兴趣的时刻” 做出决定。你所能监听的不再只是cli

15、ck、load、blur和mouseover等浏览器事件。在富用户界面（ rich UI）应用程序中，drag（拖动） 、drop（拖放） 、moved（移动）、complete（完成）和tabSwitch（标签切换）都可能是令人感兴趣的事件。 它们都是在普通浏览器事件的基础上抽象出来的可观察事件，可由发布者对象向其监听者广播。220 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 10 页 - - - - - - - - - 15.4示例：动画 203 15.4示例：动

16、画动画是在应用程序中实现可观察对象的一个很好的起点。眨眼间你就能想出至少3个可观察到的时刻：开始、结束和进行中。在本例中，我们将分别称之为onStart、onComplete和onTween。下面的代码演示了用前面编写的Publisher工具实现这些事件的过程：可以看到， 如果你是负责实现为超人披上斗篷和解下斗篷的功能的人的话，这种运作方式还真不错。借助于发布者，你可以知道超人什么时候准备起飞以及什么时候回到地面。你只需要预订这些时刻的通知便万事大吉。221名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - -

17、 - - - - 第 7 页，共 10 页 - - - - - - - - - 204第 15 章 观察者模式15.5事件监听器也是观察者在DOM脚本编程环境中的高级事件模式中，事件监听器说到底就是一种内置的观察者。事件处理器（ handler）与事件监听器（ listener）并不是一回事。前者说穿了就是一种把事件传给与其关联的函数的手段。 而且在这种模型中一种事件只能指定一个回调方法。而在监听器模式中，一个事件可以与几个监听器关联。每个监听器都能独立于其他监听器而改变。打个比方，对San Francisco Chronicle这家报社来说，其订阅者 Joe 订没订New York Time

18、s都无所谓。同样， Joe也不在乎Lindsay是否也订了 SanFrancisco Chronnicle。每一方都只管处理自己的数据和相关的行为。例如，使用事件监听器，可以让多个函数响应同一个事件：但用事件处理器就办不到：在第一个例子中，由于使用的是事件监听器，所以click事件发生时fn1和fn2都会被调用。而第二个例子使用的是事件处理器，其中第二次对onclick赋值的结果是fn1被fn2取代，因此click事件发生时只会调用fn2，不会调用fn1。言归正传。监听器和观察者之间的共同之处显而易见。实际上它们互为同义语。它们都订阅特定的事件，然后等待事件的发生。事件发生时，订阅方的回调函数

19、会得到通知。传给它们的参数是一个事件对象，其中包含着事件发生时间、事件类型和事件发源地等有用的信息。222 原文为 “a handler is essentially a means of passing the event along to a function to which it is assigned” 。这种说法其实不太严谨。读者不必太过当真。译者注名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 10 页 - - - - - - - - - 15.9小结 20

20、5 15.6观察者模式的适用场合如果希望把人的行为和应用程序的行为分开，那么观察者模式正适用于这种场合。最好不要实现一些与用户操作绑在一起而且来源于浏览器的东西，比如click、mouseover或keypress之类的基本 DOM事件。 对于那些只关心动画的开始， 或者错别字的发现 （在拼写检查应用程序中）的程序员而言，那些事件提供不了什么有用信息。举个例来说，用户点击导航系统的一个标签（tab）时，会打开一个包含着更多相关信息的菜单。当然你可以直接监听这个click事件，不过这需要知道监听的是哪个元素。这样做的另一个弊端是你的实现与click事件直接绑在了一起。比监听click事件更好的做

21、法是：创建一个可观察的onTabChange对象，并且在特定事件发生时通知所有观察者。如果菜单改为在鼠标指向标签时或者标签处于焦点之下时打开，那么这个onTabChange对象会替你处理这种改变。15.7观察者模式之利观察者模式是开发基于行为 （action-based ）的大型应用程序的有力手段。在一次浏览器会话期间，应用程序中可能会断断续续地发生几十次、几百次甚至几千次各种事件。你可以削减为事件注册监听器的次数，让可观察对象借助一个事件监听器替你处理各种行为并将信息委托（delegate ）给它的所有订阅者，从而降低内存消耗和提高互动性能。这样一来，就不用没完没了地为同样的元素增添新的事件

22、监听器，这有利于减少系统开销并提高程序的可维护性。15.8观察者模式之弊使用这种观察者接口的一个不利之处在于创建可观察对象所带来的加载时间开销。这可以通过使用 惰性 加载技术加以化解， 具体而言就是把新的可观察对象的实例化推迟到需要发送事件通知的时候。这样一来，订阅者在事件尚未创建的时候就能订阅它，应用程序的初始加载时间也就不会受到影响。15.9小结观察者模式是对应用系统进行抽象的有力手段。你可以定义一些事件供其他开发人员使用，而并不需要为此深入了解他们的代码。一个事件可以被5个订阅者订阅，而一个订阅者也可以订阅5个不同的事件。对于浏览器这类互动环境来说这非常理想。现在的Web应用程序越来越大

23、，在此背景下，作为一种提高代码的可维护性和简洁性的有力手段，可观察对象的作用更显突出。这种模式的应用有助于防止第三方开发人员和合作伙伴因为对你的应用程序的细节了解得太多原文为“ It s best not to implement something that is tied to user interaction and originates from the browser, such as basic DOM events like click, mouseover, or keypress” 。坦率地说，我认为这不太说得通。我姑且按字面意思译出来。请读者自行判断。译者注也即，只需要为此

24、修改onTabChange的实现细节即可，不必修改onTabChange的观察者。译者注名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 10 页 - - - - - - - - - 206第 15 章 观察者模式而把事情搞糟。实践一下观察者模式吧，这可以给你的朋友和上司留下深刻印象。在Publisher那个工具中，我们开发的是一种“推”系统。发布者广播事件的方式是把数据推给每个订阅者。你可以自己尝试写个工具，让每个订阅者从发布者那里“拉”数据。我们可以给你一点提示：先为订阅者实现一个“拉”方法，该方法以一个Publisher对象为参数。223 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 10 页 - - - - - - - - -