JavaScript设计模式之观察者模式（发布者-订阅者模式）
观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的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': ‘麻生希' } )
相关文章
这篇文章主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了解决WordPress使用CDN后博文无法评论的错误的方法,同时提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以参考下2015-12-12
如今ES6已经发布了有一段时间了，很多人学了ES6但是却没运行环境，下面这篇文章主要给大家介绍了关于搭建ES6运行环境的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要给大家介绍了关于JavaScript如何将时间戳转化为年月日时分秒格式的相关资料,在前端的日常工作当中,时间戳的使用也是不少的,有时后端返回给我们的数据是一个时间戳,我们需要转换成年月日,时分秒的形式展示在页面当中,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下2015-04-04
javascript动态添加、修改、删除对象的属性与方法详解
本篇文章主要是对javascript动态添加、修改、删除对象的属性与方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
javascript实现textarea中tab键的缩排处理方法
这篇文章主要介绍了javascript实现textarea中tab键的缩排处理方法,涉及javascript处理鼠标事件及页面元素的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了Javascript表单序列化原理及实现代码详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
在JavaScript中，我们经常需要对数组中对象的属性进行统计。在本文中，我们将介绍如何使用JavaScript来实现这一功能，文中有详细的代码示例，需要的朋友可以借鉴参考2023-05-05
js验证实用性非常高，用途非常广泛，用于校验ip地址的格式等操作，本文给大家介绍JavaScript中常用的验证reg，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
最新评论