JavaScript设计模式之观察者模式(发布者-订阅者模式)


Posted in Javascript onSeptember 24, 2014

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的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中instanceof运算符的用法总结
Nov 19 Javascript
Javascript玩转继承(一)
May 08 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
JavaScript获取图片真实大小代码实例
Sep 24 #Javascript
再探JavaScript作用域
Sep 24 #Javascript
深入理解javascript原型链和继承
Sep 23 #Javascript
深入理解javascript构造函数和原型对象
Sep 23 #Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
You might like
php+mysql 实现身份验证代码
2010/03/24 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
wxPython学习之主框架实例
2014/09/28 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python通过Pillow实现图片对比
2020/04/29 Python
sklearn的predict_proba使用说明
2020/06/28 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python