jquery源码解析---理解观察者模式
2016-09-19 11:54
232 查看
理解观察者模式
讲解jQuery回调对象之前,我们有必要先理解其背后的设计思想 - “观察者模式”。观察者模式 (pub/sub) 的背后,总的想法是在应用程序中增强松耦合性。并非是在其它对象的方法上的单个对象调用。一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,通知观察者。观察者也被叫作订阅者(Subscriber),它指向被观察的对象,既被观察者(Publisher
或 subject)。当事件发生时,被观察者(Publisher)就会通知观察者(subscriber)。
观察者的使用场合
观察者的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。先看官网的demo这个例子,涉及到了 add 与 fire方法,熟悉设计模式的童鞋呢,一眼就能看出,其实又是基于发布订阅(Publish/Subscribe)的观察者模式的设计。
作为 $.Callbacks() 的创建组件的一个演示,只使用回调函数列表,就可以实现 Pub/Sub 系统,将 $.Callbacks 作为一个队列。
我们来模拟常规下最简单的实现:
JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个Observable对象,其内部包含了2个方法:订阅add方法与发布fire方法,如下代码:
var Observable = { callbacks: [], add: function(fn) { this.callbacks.push(fn); }, fire: function() { this.callbacks.forEach(function(fn) { fn(); }) } }
使用add开始订阅:
Observable.add(function() { alert(1) }) Observable.add(function() { alert(2) })
使用fire开始发布:
Observable.fire(); // 1, 2
设计的原理:
开始构建一个存放回调的数组,如
this.callbacks= []添加回调时,将回调push进this.callbacks,执行则遍历this.callbacks执行回调,也弹出1跟2了。当然这只是简洁的设计,便于理解,整体来说设计的思路代码都是挺简单的,那么我们从简单的设计深度挖掘下这种模式的优势。
注意:如果没有做过复杂交互设计,或者大型应用的开发者,可能一开始无法理解这模式的好处,就简单的设计而言用模式来处理问题,有点把简单的问题复杂化。我们不是为了使用模式而使用的。
备注:callback中加入的元素相当于观察者,Observable是被观察者,当事件发生的时候,被观察者就会通知观察者。js中的观察者模式是使用函数回调来实现的。
相关文章推荐
- Backbone源码解析(六):观察者模式应用
- jQuery源码解析(架构与依赖模块)一、理解架构
- 源码解析RxBus实现观察者模式
- 解析 ViewTreeObserver 源码,体会观察者模式、Android消息传递(下)
- Android设计模式源码解析之ListView观察者模式
- Android设计模式源码解析之ListView观察者模式
- jquery源码解析(第4章元素之理解样式)
- 如何理解原型模式(Prototype)解析(包含源码)
- 解析 ViewTreeObserver 源码,体会观察者模式、Android消息传递(上)
- PureMVC(JS版)源码解析(一):观察者模式解析
- Android设计模式系列(2)--SDK源码之观察者模式
- Jquery zzzbox 插件 工作机制 +源码解析(弹出遮罩,弹出提示确认框,装载某个)和"{}"问题
- Hadoop源码解析-作业执行流程-本地模式
- 对REST架构的理解及Jquery+JSON+RESTful WCF (附源码)
- jquery源码阅读知识储(8)Javascript引用和作用域的理解
- 极速理解设计模式系列:2.观察者模式(Observer Pattern)
- C#观察者模式的实现的一点理解。
- 理解jQuery解析JSON数据对象原理
- Hadoop源码解析-作业执行流程-集群模式
- jQuery源码解析1(Utilities)