源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

深入理解JavaScript系列(31):设计模式之代理模式详解

  • 时间:2022-09-24 20:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:深入理解JavaScript系列(31):设计模式之代理模式详解
[b]介绍[/b] 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。 代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。 [b]正文[/b] 我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理(其实挺好的,可以扣几朵给媳妇),那我们如何来做呢?
[url=http://new.music.yahoo.com/videos/--2158073]   <li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--4472739">Save Me</a></li>   <li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--45286339">Crush</a></li>   <li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--2144530">Don't Drink The Water</a></li>   <li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--217241800">Funny the Way It Is</a></li>   <li><input type="checkbox" checked><a href="http://new.music.yahoo.com/videos/--2144532">What Would You Say</a> </li> </ol>
我们先来分析如下,首先我们不仅要监控a连接的点击事件,还要监控“全选/反选”的点击事件,然后请求服务器查询视频信息,组装HTML信息显示在li元素的最后位置上,效果如下: [img]http://files.jb51.net/file_images/article/201503/201533112853837.jpg?201523112922[/img] 然后再监控play连接的点击事件,点击以后开始播放,效果如下: [img]http://files.jb51.net/file_images/article/201503/201533112929549.jpg?201523112935[/img] 好了,开始,没有jQuery,我们自定义一个选择器: 由于Yahoo的json服务提供了callback参数,所以我们传入我们自定义的callback以便来接受数据,具体查询字符串拼装代码如下:
[url=http://new.music.yahoo.com/videos/--]         info = document.createElement('div');         info.id = "info" + id;         info.innerHTML = html;         $('v' + id).appendChild(info);     },     // 获取信息并显示     getInfo: function (id) {         var info = $('info' + id);         if (!info) {             proxy.makeRequest(id, videos.updateList, videos); //执行代理职责,并传入videos.updateList回调函数             return;         }         if (info.style.display === "none") {             info.style.display = '';         } else {             info.style.display = 'none';         }     } };
现在可以处理点击事件的代码了,由于有很多a连接,如果每个连接都绑定事件的话,显然性能会有问题,所以我们将事件绑定在<ol>元素上,然后检测点击的是否是a连接,如果是说明我们点击的是视频地址,然后就可以播放了:
全选反选的代码大同小异,我们就不解释了:
[u]复制代码[/u] 代码如下:
$('toggle-all').onclick = function (e) {     var hrefs, i, max, id;     hrefs = $('vids').getElementsByTagName('a');     for (i = 0, max = hrefs.length; i < max; i += 1) {         // 忽略play连接         if (hrefs[i].className === "play") {             continue;         }         // 忽略没有选择的项         if (!hrefs[i].parentNode.firstChild.checked) {             continue;         }         id = hrefs[i].href.split('--')[1];         hrefs[i].parentNode.id = "v" + id;         videos.getInfo(id);     } };
[b]总结[/b] 代理模式一般适用于如下场合: 1.远程代理,也就是为了一个对象在不同的地址空间提供局部代表,这样可以隐藏一个对象存在于不同地址空间的事实,就像web service里的代理类一样。 2.虚拟代理,根据需要创建开销很大的对象,通过它来存放实例化需要很长时间的真实对象,比如浏览器的渲染的时候先显示问题,而图片可以慢慢显示(就是通过虚拟代理代替了真实的图片,此时虚拟代理保存了真实图片的路径和尺寸。 3.安全代理,用来控制真实对象访问时的权限,一般用于对象应该有不同的访问权限。 4.智能指引,只当调用真实的对象时,代理处理另外一些事情。例如C#里的垃圾回收,使用对象的时候会有引用次数,如果对象没有引用了,GC就可以回收它了。 参考:《大话设计模式》
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部