JavaScript设计模式(10)-观察者模式
观察者模式
1. 介绍
- 发布者与订阅者是多对多的方式
- 通过推与拉获取数据：发布者推送到订阅者或订阅者到发布者那边拉
- 使并行开发的多个实现能彼此独立地进行修改
- 其实我们在前端开发中使用到的时间监听就是浏览器实现的观察者模式
2. 示例：订阅报纸
function Publisher() {
this.subscribers = [];
}
Publisher.prototype.deliver = function(data) {
this.subscribers.forEach(function(fn) {
fn(data)
})
return this;
}
Function.prototype.subscribe = function(publisher) {
var that = this;
var aleradyExists = publisher.subscribers.some(function(el) {
return el === that;
});
if(!aleradyExists) {
publisher.subscribers.push(this);
}
return this;
}
Function.prototype.unsubscribe = function(publisher) {
var that = this;
publisher.subscribers = publisher.subscribers.filter(function(el) {
return el !== that;
})
return this
}
var NewYoukTimes = new Publisher;
var SfChronicle = new Publisher;
var Joe = function(from) {
console.log('Delivery from ' + from + ' to Joe')
}
var Same = function(from) {
console.log('Delivery from ' + from + ' to Same')
}
// usage
// 订阅
Joe.subscribe(NewYoukTimes).subscribe(SfChronicle)
Same.subscribe(NewYoukTimes)
// 发布
NewYoukTimes.deliver('aa').deliver('cc')
SfChronicle.deliver('dd')
// 取消订阅
Joe.unsubscribe(NewYoukTimes)
3. 示例：动画
里面有个 Animation 类提供了三个可以被订阅的观察对象 onStart、onComplete、onTween，有点类似于浏览器提供的事件监听，只是浏览器提供的是 onclick、onchange 等。由 Animation 内部决定这三个观察对象什么时候发布信息，其他的订阅者只要等待被触发就行。
<style>
#img {
margin-top: 20px;
}
</style>
<body>
<button id="startBt">开始</button>
<button id="stopBt">停止</button>
<br/>
<img id="img" src="./images/fly1.png">
</body>
<script>
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn
return this
}
function Publisher() {
this.subscribers = [];
}
Publisher.prototype.deliver = function(data) {
this.subscribers.forEach(function(fn) {
fn(data)
})
return this;
}
Function.prototype.subscribe = function(publisher) {
var that = this;
var aleradyExists = publisher.subscribers.some(function(el) {
return el === that;
});
if(!aleradyExists) {
publisher.subscribers.push(this);
}
return this;
}
Function.prototype.unsubscribe = function(publisher) {
var that = this;
publisher.subscribers = publisher.subscribers.filter(function(el) {
return el !== that;
})
return this
}
var Animation = function(o) {
this.config = o
this.onStart = new Publisher // 可观察对象
this.onComplete = new Publisher // 可观察对象
this.onTween = new Publisher // 可观察对象
this.timer = undefined;
this.frame = 1;
this.state = 'stop'
};
Animation.method('start', function(){
if(this.state !== 'stop') {
return
}
this.state = 'start'
this.onComplete.deliver('start at: ' + new Date().getTime())
var that = this
this.timer = setInterval(function(){
that.onTween.deliver(that.frame)
that.frame++;
},this.config.timeLate);
}).method('stop', function() {
if(this.state !== 'start') {
return
}
this.state = 'stop'
clearInterval(this.timer);
// this.frame = 1;
this.onComplete.deliver('stop at: ' + new Date().getTime())
})
var animation = new Animation({ timeLate: 400})
// 超人飞行部分动画
var frameImg = document.getElementById('img')
var jumpToFly = function(info) { // 订阅者
console.log(info)
}
var superManFlying = function(i) {
var frame = i%3 + 1;
frameImg.src = "./images/fly" + frame + ".png"
console.log('frame: ' + i) // 订阅者
};
var downToLand = function(info) { // 订阅者
console.log(info)
}
jumpToFly.subscribe(animation.onStart)
superManFlying.subscribe(animation.onTween)
downToLand.subscribe(animation.onComplete)
document.getElementById('startBt').addEventListener('click', function() {
animation.start();
})
document.getElementById('stopBt').addEventListener('click', function() {
animation.stop()
})
</script>
4. 观察者的适用场合
- 希望把人的行为和应用程序的行为分开
5. 观察者模式的利与弊
- 利：
- 在基于行为的大型应用程序中，可能会连续的发生几十、几百、几千次各种事件，通过观察者模式可以削减为事件注册注册监听器的次数，让可观察对象借助一个事件监听器替你处理各种行为并将信息委托给他的订阅者，从而减低内存消耗和互动性能，这样有利于减少系统开销并提高程序的可维护性
- 弊：
- 创建可观察对象所带来的加载事件开销（可以通过惰性加载技术化解，具体而言就是把新的可观察对象的实例化推迟到需要发送事件通知的时候，这样一来，订阅者在事件尚未创建的时候就能订阅他，而程序的初始化时间也就不收影响）
注意
转载、引用，但请标明作者和原文地址
JavaScript设计模式(10)-观察者模式的更多相关文章
- JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
- 再起航，我的学习笔记之JavaScript设计模式18(观察者模式)
观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...
- 再起航，我的学习笔记之JavaScript设计模式10(单例模式)
单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...
- JavaScript设计模式-22.观察者模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript设计模式之观察者模式
观察者模式又称发布/订阅模式 publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...
- javascript 设计模式之观察者模式
观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...
- JavaScript设计模式-10.工厂模式实例xhr
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- javaScript 设计模式系列之一：观察者模式
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...
随机推荐
- UEditor工具栏上自定义按钮、图标、事件和右击菜单添加自定义按钮
首先我要说是,举例说的这个版本是1.2以上的,因为一些配置代码转移到了zh-cn.js里,其他没有变化.开门见山直接写:(我自定义的是在线美图功能) 第一步:找到ueditor.config.js文件 ...
- Spring Boot让开发如此简单
从html到asp后一直专注.net开发,从.net诞生到如今,从winform到webform,从asp.net到.net mcv,从.net mvc到.net core,从ado.net到linq ...
- How to install tcpping on Linux.md
To install tcptraceroute on Debian/Ubuntu: $ sudo apt-get install tcptraceroute To install tcptracer ...
- 重磅发布：《阿里巴巴Android开发手册(规约)》
1.前言 阿里巴巴于近日为广大程序员再送上重磅开春好礼:<阿里巴巴Android开发手册(规约)>.该开发规范在阿里内部经过了长期的修缮,现已总结成册,向所有移动开发者.技术爱好者开放,希 ...
- 修改maven项目jdk版本,并解决Dynamic Web Module 3.1 requires Java 1.7 or newer错误
使用maven的时候,默认会使用1.5版本的JDK,并且创建项目时也会是1.5版本. 但是我想用JDK1.7版本,所以我手动将maven项目JDK改为1.7版本. 手动修改JDK版本为1.7以后,项目 ...
- 如何使用 libqr 库生成二维码？
使用 libqr 库只需 4 步即可生成二维码 1.初始化 QRCode 结构体 QRCode *qrInit(int version, int mode, int eclevel, int mask ...
- 《android开发艺术探索》读书笔记（十五）--Android性能优化
接上篇<android开发艺术探索>读书笔记(十四)--JNI和NDK编程 No1: 如果<include>制定了这个id属性,同时被包含的布局文件的根元素也制定了id属性,那 ...
- uva140
全排列回溯剪枝. 题目数据很水.记录当前最小带宽,边回溯边计算当前序列最大的距离(也就是带宽),如果当前带宽超过了当前的最小带宽就剪枝. 注意下,数据读入时的字符串处理. AC代码 #include& ...
- nyoj940 A dp problem 打表
首先枚举i,那么构成i^2的最小值为1个正方形,当然1~1000并不会都得到答案,那么剩下的数字就递增枚举这些数,这个数可能右多对数构成,则枚举这些数.例如 5 = 1 + 4, 5 = 2 + 3, ...
- yum源配置的三种方法
(一)yum源概述 yum需要一个yum库,也就是yum源.默认情况下,CentOS就有一个yum源.在/etc/yum.repos.d/目录下有一些默认的配置文件(可以将这些文件移到/opt下,或者 ...