手机网站设计只选亿企邦,哪个选项不属于网络营销的特点,昆山装饰公司网站建设,html5新增标签有哪些说明#xff1a;本篇文章转载自小火柴的蓝色理想的一篇博文。原文地址#xff1a;http://www.cnblogs.com/xiaohuochai/p/8031564.html 发布—订阅模式又叫观察者模式#xff0c;它定义对象间的一对多的依赖关系#xff0c;当一个对象的状态发生改变时#xff0c;所有依赖…说明本篇文章转载自小火柴的蓝色理想的一篇博文。原文地址http://www.cnblogs.com/xiaohuochai/p/8031564.html 发布—订阅模式又叫观察者模式它定义对象间的一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都将得到通知。在javascript开发中一般用事件模型来替代传统的发布—订阅模式。本文将详细介绍发布订阅模式 现实事例 不论是在程序世界里还是现实生活中发布—订阅模式的应用都非常广泛 比如小明最近看上了一套房子到了售楼处之后才被告知该楼盘的房子早已售罄。好在售楼处工作人员告诉小明不久后还有一些尾盘推出开发商正在办理相关手续手续办好后便可以购买。但到底是什么时候目前还没有人能够知道。于是小明记下了售楼处的电话以后每天都会打电话过去询问是不是已经到了购买时间。除了小明还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后该工作人员决定辞职因为厌倦了每天回答1000个相同内容的电话 当然现实中没有这么笨的销售公司实际上故事是这样的小明离开之前把电话号码留在了售楼处。售楼处工作人员答应他新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样他们的电话号码都被记在售楼处的花名册上新楼盘推出的时候售楼处工作人员会翻开花名册遍历上面的电话号码依次发送一条短信来通知他们 在上面的例子中发送短信通知就是一个典型的发布—订阅模式小明、小红等购买者都是订阅者他们订阅了房子开售的消息。售楼处作为发布者会在合适的时候遍历花名册上的电话号码依次给购房者发布消息 使用发布—订阅模式有着显而易见的优点购房者不用再天天给售楼处打电话咨询开售时间在合适的时间点售楼处作为发布者会通知这些消息订阅者购房者和售楼处之间不再强耦合在一起当有新的购房者出现时他只需把手机号码留在售楼处售楼处不关心购房者的任何情况不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者比如售楼处工作人员离职售楼处从一楼搬到二楼这些改变都跟购房者无关只要售楼处记得发短信这件事情 DOM事件 发布—订阅模式可以广泛应用于异步编程中这是一种替代传递回调函数的方案。比如可以订阅ajax请求的error、succ等事件。或者如果想在动画的每一帧完成之后做一些事情可以订阅一个事件然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式就无需过多关注对象在异步运行期间的内部状态而只需要订阅感兴趣的事件发生点 发布—订阅模式可以取代对象之间硬编码的通知机制一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起虽然不太清楚彼此的细节但这不影响它们之间相互通信。当有新的订阅者出现时发布者的代码不需要任何修改同样发布者需要改变时也不会影响到之前的订阅者。只要之前约定的事件名没有变化就可以自由地改变它们 实际上只要在DOM节点上面绑定过事件函数那就使用过发布—订阅模式 document.body.addEventListener(click,function(){alert(2); },false); document.body.click(); //模拟用户点击 在这里需要监控用户点击document.body的动作但是没办法预知用户将在什么时候点击。所以订阅document.body上的click事件当body节点被点击时body节点便会向订阅者发布这个消息 当然还可以随意增加或者删除订阅者增加任何订阅者都不会影响发布者代码的编写 document.body.addEventListener(click,function(){alert(2); },false); document.body.addEventListener(click,function(){ alert(3); },false); document.body.addEventListener(click,function(){ alert(4); },false); document.body.click(); //模拟用户点击 [注意]手动触发事件更好的做法是IE下用fireEvent标准浏览器下用dispatchEvent实现 自定义事件 除了DOM事件还会经常实现一些自定义的事件这种依靠自定义事件完成的发布—订阅模式可以用于任何javascript代码中 下面是实现发布—订阅模式的步骤 1、先要指定好谁充当发布者比如售楼处 2、然后给发布者添加一个缓存列表用于存放回调函数以便通知订阅者售楼处的花名册 3、最后发布消息的时候发布者会遍历这个缓存列表依次触发里面存放的订阅者回调函数遍历花名册挨个发短信 另外还可以往回调函数里填入一些参数订阅者可以接收这些参数。这是很有必要的比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息订阅者接收到这些信息之后可以进行各自的处理 var salesOffices {}; // 定义售楼处
salesOffices.clientList []; // 缓存列表存放订阅者的回调函数
salesOffices.listen function( fn ){ // 增加订阅者 this.clientList.push( fn ); // 订阅的消息添加进缓存列表 }; salesOffices.trigger function(){ // 发布消息 for( var i 0, fn; fn this.clientList[ i ]; ){ fn.apply( this, arguments ); // (2) // arguments 是发布消息时带上的参数 } }; salesOffices.listen( function( price, squareMeter ){ // 小明订阅消息 console.log( 价格 price ); console.log( squareMeter squareMeter ); }); salesOffices.listen( function( price, squareMeter ){ // 小红订阅消息 console.log( 价格 price ); console.log( squareMeter squareMeter ); }); salesOffices.trigger( 2000000, 88 ); // 输出200 万88 平方米 salesOffices.trigger( 3000000, 110 ); // 输出300 万110 平方米 至此已经实现了一个最简单的发布—订阅模式但这里还存在一些问题。看到订阅者接收到了发布者发布的每个消息虽然小明只想买88平方米的房子但是发布者把110平方米的信息也推送给了小明这对小明来说是不必要的困扰。所以有必要增加一个标示key让订阅者只订阅自己感兴趣的消息。改写后的代码如下 var salesOffices {}; // 定义售楼处
salesOffices.clientList []; // 缓存列表存放订阅者的回调函数salesOffices.listen function( key, fn ){ if ( !this.clientList[ key ] ){ // 如果还没有订阅过此类消息给该类消息创建一个缓存列表 this.clientList[ key ] []; } this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表 }; salesOffices.trigger function(){ // 发布消息 var key Array.prototype.shift.call( arguments ), // 取出消息类型 fns this.clientList[ key ]; // 取出该消息对应的回调函数集合 if ( !fns || fns.length 0 ){ // 如果没有订阅该消息则返回 return false; } for( var i 0, fn; fn fns[ i ]; ){ fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数 } }; salesOffices.listen( squareMeter88, function( price ){ // 小明订阅88 平方米房子的消息 console.log( 价格 price ); // 输出 2000000 }); salesOffices.listen( squareMeter110, function( price ){ // 小红订阅110 平方米房子的消息 console.log( 价格 price ); // 输出 3000000 }); salesOffices.trigger( squareMeter88, 2000000 ); // 发布88 平方米房子的价格 salesOffices.trigger( squareMeter110, 3000000 ); // 发布110 平方米房子的价格 很明显现在订阅者可以只订阅自己感兴趣的事件了 通用实现 有没有办法可以让所有对象都拥有发布—订阅功能呢有的javascript作为一门解释执行的语言给对象动态添加职责是理所当然的事情。所以把发布—订阅的功能提取出来放在一个单独的对象内 var event {clientList: [],listen: function( key, fn ){if ( !this.clientList[ key ] ){ this.clientList[ key ] []; } this.clientList[ key ].push( fn ); // 订阅的消息添加进缓存列表 }, trigger: function(){ var key Array.prototype.shift.call( arguments ), // (1); fns this.clientList[ key ]; if ( !fns || fns.length 0 ){ // 如果没有绑定对应的消息 return false; } for( var i 0, fn; fn fns[ i ]; ){ fn.apply( this, arguments ); // (2) // arguments 是trigger 时带上的参数 } } }; 再定义一个installEvent函数这个函数可以给所有的对象都动态安装发布—订阅功能 var installEvent function( obj ){for ( var i in event ){ obj[ i ] event[ i ]; } }; 下面给售楼处对象salesOffices动态增加发布—订阅功能 var salesOffices {};
installEvent( salesOffices );
salesOffices.listen( squareMeter88, function( price ){ // 小明订阅消息 console.log( 价格 price ); }); salesOffices.listen( squareMeter100, function( price ){ // 小红订阅消息 console.log( 价格 price ); }); salesOffices.trigger( squareMeter88, 2000000 ); // 输出2000000 salesOffices.trigger( squareMeter100, 3000000 ); // 输出3000000 【取消订阅】 有时候也许需要取消订阅事件的功能。比如小明突然不想买房子了为了避免继续接收到售楼处推送过来的短信小明需要取消之前订阅的事件。现在给event对象增加remove方法 event.remove function( key, fn ){var fns this.clientList[ key ];if ( !fns ){ // 如果key 对应的消息没有被人订阅则直接返回 return false; } if ( !fn ){ // 如果没有传入具体的回调函数表示需要取消key 对应消息的所有订阅 fns ( fns.length 0 ); }else{ for ( var l fns.length - 1; l 0; l-- ){ // 反向遍历订阅的回调函数列表 var _fn fns[ l ]; if ( _fn fn ){ fns.splice( l, 1 ); // 删除订阅者的回调函数 } } } }; var salesOffices {}; var installEvent function( obj ){ for ( var i in event ){ obj[ i ] event[ i ]; } } installEvent( salesOffices ); salesOffices.listen( squareMeter88, fn1 function( price ){ // 小明订阅消息 console.log( 价格 price ); }); salesOffices.listen( squareMeter88, fn2 function( price ){ // 小红订阅消息 console.log( 价格 price ); }); salesOffices.remove( squareMeter88, fn1 ); // 删除小明的订阅 salesOffices.trigger( squareMeter88, 2000000 ); // 输出2000000 网站登录 假如正在开发一个商城网站网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件就是必须先用ajax异步请求获取用户的登录信息。这是很正常的比如用户的名字和头像要显示在header模块里而这两个字段都来自用户登录后返回的信息。至于ajax请求什么时候能成功返回用户信息这点没有办法确定 但现在还不足以说服在此使用发布—订阅模式因为异步的问题通常也可以用回调函数来解决。更重要的一点是不知道除了header头部、nav导航、消息列表、购物车之外将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合比如下面这样的形式 login.succ(function(data){header.setAvatar( data.avatar); // 设置header 模块的头像nav.setAvatar( data.avatar ); // 设置导航模块的头像message.refresh(); // 刷新消息列表 cart.refresh(); // 刷新购物车列表 }); 现在必须了解header模块里设置头像的方法叫setAvatar、购物车模块里刷新的方法叫refresh这种耦合性会使程序变得僵硬header模块不能随意再改变setAvatar的方法名它自身的名字也不能被改为header1、header2。这是针对具体实现编程的典型例子针对具体实现编程是不被赞同的 等到有一天项目中又新增了一个收货地址管理的模块在最后部分加上这行代码 login.succ(function(data){header.setAvatar( data.avatar); // 设置header 模块的头像nav.setAvatar( data.avatar ); // 设置导航模块的头像message.refresh(); // 刷新消息列表 cart.refresh(); // 刷新购物车列表 address.refresh(); }); 用发布—订阅模式重写之后对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时登录模块只需要发布登录成功的消息而业务方接受到消息之后就会开始进行各自的业务处理登录模块并不关心业务方究竟要做什么也不想去了解它们的内部细节。改进后的代码如下 $.ajax(http://xx.com?login,function(data){ //登录成功login.trigger(loginSucc,data); //发布登录成功的消息 }); 各模块监听登录成功的消息 var header (function(){ // header 模块login.listen( loginSucc, function( data){ header.setAvatar( data.avatar ); }); return { setAvatar: function( data ){ console.log( 设置header 模块的头像 ); } } })(); var nav (function(){ // nav 模块 login.listen( loginSucc, function( data ){ nav.setAvatar( data.avatar ); }); return { setAvatar: function( avatar ){ console.log( 设置nav 模块的头像 ); } } })(); 如上所述随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录完成之后又增加一个刷新收货地址列表的行为那么只要在收货地址模块里加上监听消息的方法即可代码如下 var address (function(){ // nav 模块login.listen( loginSucc, function( obj ){ address.refresh( obj ); }); return { refresh: function( avatar ){ console.log( 刷新收货地址列表 ); } } })(); 全局发布订阅对象 刚刚实现的发布—订阅模式给售楼处对象和登录对象都添加了订阅和发布的功能这里还存在两个小问题1、给每个发布者对象都添加了listen和trigger方法以及一个缓存列表clientList这其实是一种资源浪费2、小明跟售楼处对象还是存在一定的耦合性小明至少要知道售楼处对象的名字是salesOffices才能顺利的订阅到事件 salesOffices.listen(squareMeter100,function(price){ //小明订阅消息console.log(价格price); }); 如果小明还关心300平方米的房子而这套房子的卖家是salesOffices2这意味着小明要开始订阅salesOffices2对象。见如下代码 salesOffices2.listen(squareMeter300,function(price){ //小明订阅消息console.log(价格price); }); 其实在现实中买房子未必要亲自去售楼处只要把订阅的请求交给中介公司而各大房产公司也只需要通过中介公司来发布房子信息。这样一来不用关心消息是来自哪个房产公司在意的是能否顺利收到消息。当然为了保证订阅者和发布者能顺利通信订阅者和发布者都必须知道这个中介公司 同样在程序中发布—订阅模式可以用一个全局的Event对象来实现订阅者不需要了解消息来自哪个发布者发布者也不知道消息会推送给哪些订阅者Event作为一个类似“中介者”的角色把订阅者和发布者联系起来。见如下代码 var Event (function(){var clientList {},listen,trigger,remove;listen function( key, fn ){if ( !clientList[ key ] ){ clientList[ key ] []; } clientList[ key ].push( fn ); }; trigger function(){ var key Array.prototype.shift.call( arguments ), fns clientList[ key ]; if ( !fns || fns.length 0 ){ return false; } for( var i 0, fn; fn fns[ i ]; ){ fn.apply( this, arguments ); } }; remove function( key, fn ){ var fns clientList[ key ]; if ( !fns ){ return false; } if ( !fn ){ fns ( fns.length 0 ); }else{ for ( var l fns.length - 1; l 0; l-- ){ var _fn fns[ l ]; if ( _fn fn ){ fns.splice( l, 1 ); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); Event.listen( squareMeter88, function( price ){ // 小红订阅消息 console.log( 价格 price ); // 输出价格2000000 }); Event.trigger( squareMeter88, 2000000 ); // 售楼处发布消息 【模块间通信】 上面实现的发布—订阅模式的实现是基于一个全局的Event对象利用它可以在两个封装良好的模块中进行通信这两个模块可以完全不知道对方的存在 比如现在有两个模块a模块里面有一个按钮每次点击按钮之后b模块里的div中会显示按钮的总点击次数用全局发布—订阅模式完成下面的代码使得a模块和b模块可以在保持封装性的前提下进行通信 button idcount点我/button
div idshow/div script typetext/JavaScript var a (function(){ var count 0; var button document.getElementById( count ); button.onclick function(){ Event.trigger( add, count ); } })(); var b (function(){ var div document.getElementById( show ); Event.listen( add, function( count ){ div.innerHTML count; }); })(); /script 但要留意一个问题模块之间如果用了太多的全局发布—订阅模式来通信那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块或者消息会流向哪些模块这又会给维护带来一些麻烦也许某个模块的作用就是暴露一些接口给其他模块调用 【先发布后订阅】 常见的发布—订阅模式都是订阅者必须先订阅一个消息随后才能接收到发布者发布的消息。在某些情况下需要先将这条消息保存下来等到有对象来订阅它的时候再重新把消息发布给订阅者。就如同QQ中的离线消息一样离线消息被保存在服务器中接收人下次登录上线之后可以重新收到这条消息 /**************先发布后订阅********************/
Event.trigger(click,1); Event.listen(click,function(a){ console.log(a); //输出1 }); 这种需求在实际项目中是存在的比如在商城网站中获取到用户信息之后才能渲染用户导航模块而获取用户信息的操作是一个ajax异步请求。当ajax请求成功返回之后会发布一个事件在此之前订阅了此事件的用户导航模块可以接收到这些用户信息 但是这只是理想的状况因为异步的原因不能保证ajax请求返回的时间有时候它返回得比较快而此时用户导航模块的代码还没有加载好还没有订阅相应事件特别是在用了一些模块化惰性加载的技术后这是很可能发生的事情。也许还需要一个方案使得的发布—订阅对象拥有先发布后订阅的能力 为了满足这个需求要建立一个存放离线事件的堆栈当事件发布的时候如果此时还没有订阅者来订阅这个事件暂时把发布事件的动作包裹在一个函数里这些包装函数将被存入堆栈中等到终于有对象来订阅此事件的时候将遍历堆栈并且依次执行这些包装函数也就是重新发布里面的事件。当然离线事件的生命周期只有一次就像QQ的未读消息只会被重新阅读一次所以刚才的操作只能进行一次 【全局事件的命名冲突】 全局的发布—订阅对象里只有一个clinetList来存放消息名和回调函数大家都通过它来订阅和发布各种消息久而久之难免会出现事件名冲突的情况所以还可以给Event对象提供创建命名空间的功能 /**************使用命名空间********************/
Event.create(namespace1).listen(click,function(a){ console.log(a); //输出1 }); Event.create(namespace1).trigger(click,1); Event.create(namespace2).listen(click,function(a){ console.log(a); //输出2 }); Event.create(namespace2).trigger(click,2); 下面是完整代码 var Event (function(){var global this, Event, _default default; Event function(){ var _listen, _trigger, _remove, _slice Array.prototype.slice, _shift Array.prototype.shift, _unshift Array.prototype.unshift, namespaceCache {}, _create, find, each function( ary, fn ){ var ret; for ( var i 0, l ary.length; i l; i ){ var n ary[i]; ret fn.call( n, i, n); } return ret; }; _listen function( key, fn, cache ){ if ( !cache[ key ] ){ cache[ key ] []; } cache[key].push( fn ); }; _remove function( key, cache ,fn){ if ( cache[ key ] ){ if( fn ){ for( var i cache[ key ].length; i 0; i-- ){ if( cache[ key ] fn ){ cache[ key ].splice( i, 1 ); } } }else{ cache[ key ] []; } } }; _trigger function(){ var cache _shift.call(arguments), key _shift.call(arguments), args arguments, _self this, ret, stack cache[ key ]; if ( !stack || !stack.length ){ return; } return each( stack, function(){ return this.apply( _self, args ); }); }; _create function( namespace ){ var namespace namespace || _default; var cache {}, offlineStack [], // 离线事件 ret { listen: function( key, fn, last ){ _listen( key, fn, cache ); if ( offlineStack null ){ return; } if ( last last ){ }else{ each( offlineStack, function(){ this(); }); } offlineStack null; }, one: function( key, fn, last ){ _remove( key, cache ); this.listen( key, fn ,last ); }, remove: function( key, fn ){ _remove( key, cache ,fn); }, trigger: function(){ var fn, args, _self this; _unshift.call( arguments, cache ); args arguments; fn function(){ return _trigger.apply( _self, args ); }; if ( offlineStack ){ return offlineStack.push( fn ); } return fn(); } }; return namespace ? ( namespaceCache[ namespace ] ? namespaceCache[ namespace ] : namespaceCache[ namespace ] ret ) : ret; }; return { create: _create, one: function( key,fn, last ){ var event this.create( ); event.one( key,fn,last ); }, remove: function( key,fn ){ var event this.create( ); event.remove( key,fn ); }, listen: function( key, fn, last ){ var event this.create( ); event.listen( key, fn, last ); }, trigger: function(){ var event this.create( ); event.trigger.apply( this, arguments ); } }; }(); return Event; })(); 发布—订阅模式也就是常说的观察者模式它的优点非常明显一为时间上的解耦二为对象之间的解耦。应用也非常广泛既可以用在异步编程中也可以帮助完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式比如中介者模式。从架构上来看无论是MVC还是MVVM都少不了发布—订阅模式的参与而且javascript本身也是一门基于事件驱动的语言 当然发布—订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存而且订阅一个消息后也许此消息最后都未发生但这个订阅者会始终存在于内存中。另外发布—订阅模式虽然可以弱化对象之间的联系但如果过度使用的话对象和对象之间的必要联系也将被深埋在背后会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候要跟踪一个bug不是件轻松的事情。 需要购买阿里云产品的可以点击此链接购买有红包优惠哦 https://promotion.aliyun.com/ntms/yunparter/invite.html?userCodefp9ccf07转载于:https://www.cnblogs.com/libo0125ok/p/8038073.html
