JavaScript观察者模式(经典)


Posted in Javascript onDecember 09, 2015

Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种。Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态。

Observer模式的概念

Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态。
Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步。

Observer模式的角色:

Subject(被观察者)
被观察的对象。当需要被观察的状态发生变化时,需要通知队列中所有观察者对象。Subject需要维持(添加,删除,通知)一个观察者对象的队列列表。
ConcreteSubject
被观察者的具体实现。包含一些基本的属性状态及其他操作。
Observer(观察者)
接口或抽象类。当Subject的状态发生变化时,Observer对象将通过一个callback函数得到通知。
ConcreteObserver
观察者的具体实现。得到通知后将完成一些具体的业务逻辑处理。

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.

div.onclick = function click (){
alert ( ”click' )
}

只要订阅了div的click事件. 当点击div的时候, function click就会被触发.

那么到底什么是观察者模式呢. 先看看生活中的观察者模式。

好莱坞有句名言. “不要给我打电话, 我会给你打电话”. 这句话就解释了一个观察者模式的来龙去脉。 其中“我”是发布者, “你”是订阅者。

再举个例子,我来公司面试的时候,完事之后每个面试官都会对我说:“请留下你的联系方式, 有消息我们会通知你”。 在这里“我”是订阅者, 面试官是发布者。所以我不用每天或者每小时都去询问面试结果, 通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

观察者模式可以很好的实现2个模块之间的解耦。 假如我正在一个团队里开发一个html5游戏. 当游戏开始的时候,需要加载一些图片素材。加载好这些图片之后开始才执行游戏逻辑. 假设这是一个需要多人合作的项目. 我完成了Gamer和Map模块, 而我的同事A写了一个图片加载器loadImage.

loadImage的代码如下

loadImage( imgAry, function(){
Map.init();
Gamer.init();
} )

当图片加载好之后, 再渲染地图, 执行游戏逻辑. 嗯, 这个程序运行良好. 突然有一天, 我想起应该给游戏加上声音功能. 我应该让图片加载器添上一行代码.

loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )

可是写这个模块的同事A去了外地旅游. 于是我打电话给他, 喂. 你的loadImage函数在哪, 我能不能改一下, 改了之后有没有副作用. 如你所想, 各种不淡定的事发生了. 如果当初我们能这样写呢:

loadImage.listen( ”ready', function(){
Map.init();
})
loadImage.listen( ”ready', function(){
Gamer.init();
})
loadImage.listen( ”ready', function(){
Sount.init();
})

loadImage完成之后, 它根本不关心将来会发生什么, 因为它的工作已经完成了. 接下来它只要发布一个信号.

loadImage.trigger( ”ready' );

那么监听了loadImage的'ready'事件的对象都会收到通知. 就像上个面试的例子. 面试官根本不关心面试者们收到面试结果后会去哪吃饭. 他只负责把面试者的简历搜集到一起. 当面试结果出来时照着简历上的电话挨个通知.

说了这么多概念, 来一个具体的实现. 实现过程其实很简单. 面试者把简历扔到一个盒子里, 然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}

最后用观察者模式来做一个成人电视台的小应用.

//订阅者
var adultTv = Event();
adultTv .listen( ”play', function( data ){
alert ( “今天是谁的电影” + data.name );
});
//发布者
adultTv .trigger( ”play', { ‘name': ‘麻生希' } )
Javascript 相关文章推荐
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
js中实现继承的五种方法
Jan 25 Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 #Javascript
详解JavaScript基本类型和引用类型
Dec 09 #Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 #Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 #Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 #Javascript
You might like
三种php连接access数据库方法
2013/11/11 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
JS前端笔试题分析
2016/12/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
安全生产检讨书
2014/01/21 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
协议书与合同的区别
2014/04/18 职场文书
模具专业求职信
2014/06/26 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
导游词之神仙居景区
2019/11/15 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python