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 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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开发的一些注意点总结
2010/10/12 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
js实现旋转木马效果
2017/03/17 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
深入浅出学习python装饰器
2017/09/29 Python
简述Python2与Python3的不同点
2018/01/21 Python
python写入已存在的excel数据实例
2018/05/03 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
爬山的活动方案
2014/08/16 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
Django与数据库交互的实现
2021/06/03 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS