《深入理解javascript系列（31）：设计模式之代理模式详解》由会员分享，可在线阅读，更多相关《深入理解javascript系列（31）：设计模式之代理模式详解（13页珍藏版）》请在金锄头文库上搜索。
1、我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学习，了解了党的发展历程，对党的性质、宗旨、任务等基本知识有了进一步的了解深入理解JavaScript系列（31）：设计模式之代理模式详解这篇文章主要介绍了深入理解JavaScript系列（31）：设计模式之代理模式详解,代理模式使得代理对象控制具体对象的引用,代理几乎可以是任何对象：文件,资源,内存中的对象,或者是一些难以复制的东西,需要的朋友可以参考下介绍代理，顾名思义就是帮助别人做事，GoF对代理模式的定义如下：代理模式（Proxy），为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代
2、理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西。正文我们来举一个简单的例子，假如dudu要送酸奶小妹玫瑰花，却不知道她的联系方式或者不好意思，想委托大叔去送这些玫瑰，那大叔就是个代理（其实挺好的，可以扣几朵给媳妇），那我们如何来做呢？代码如下:/ 先声明美女对象var girl = function (name) this.name = name;/ 这是duduvar dudu = function (girl) this.girl = girl;this.sendGift = function (gift) alert(Hi + girl.name + , dud
3、u送你一个礼物： + gift);/ 大叔是代理var proxyTom = function (girl) this.girl = girl;this.sendGift = function (gift) (new dudu(girl).sendGift(gift); / 替dudu送花咯;调用方式就非常简单了：代码如下:var proxy = new proxyTom(new girl(酸奶小妹);proxy.sendGift(999朵玫瑰);实战一把通过上面的代码，相信大家对代理模式已经非常清楚了，我们来实战下：我们有一个简单的播放列表，需要在点击单个连接（或者全选）的时候在该连接下方显
4、示视频曲介绍以及play按钮，点击play按钮的时候播放视频，列表结构如下：代码如下:Dave Matthews vids全选/反选我们先来分析如下，首先我们不仅要监控a连接的点击事件，还要监控“全选/反选”的点击事件，然后请求服务器查询视频信息，组装HTML信息显示在li元素的最后位置上，效果如下：然后再监控play连接的点击事件，点击以后开始播放，效果如下：好了，开始，没有jQuery，我们自定义一个选择器：代码如下:var $ = function (id) return document.getElementById(id);由于Yahoo的json服务提供了callback参数，所以
5、我们传入我们自定义的callback以便来接受数据，具体查询字符串拼装代码如下：代码如下:var http = makeRequest: function (ids, callback) var url = http:/ = select * from music.video.id where ids IN (%ID%),format = format=json,handler = callback= + callback,script = document.createElement(script);sql = sql.replace(%ID%, ids.join(,);sql = enco
6、deURIComponent(sql);url += sql + & + format + & + handler;script.src = url;document.body.appendChild(script);代理对象如下：代码如下:var proxy = ids: ,delay: 50,timeout: null,callback: null,context: null,/ 设置请求的id和callback以便在播放的时候触发回调makeRequest: function (id, callback, context) / 添加到队列dd to the queuethis.ids.p
7、ush(id);this.callback = callback;this.context = context;/ 设置timeoutif (!this.timeout) this.timeout = setTimeout(function () proxy.flush();, this.delay);,/ 触发请求，使用代理职责调用了http.makeRequestflush: function () / proxy.handler为请求yahoo时的callbackhttp.makeRequest(this.ids, proxy.handler);/ 请求数据以后，紧接着执行proxy.h
8、andler方法（里面有另一个设置的callback)/ 清楚timeout和队列this.timeout = null;this.ids = ;,handler: function (data) var i, max;/ 单个视频的callback调用if (parseInt(data.query.count, 10) = 1) proxy.callback.call(proxy.context, data.query.results.Video);return;/ 多个视频的callback调用for (i = 0, max = data.query.results.Video.lengt
9、h; i proxy.callback.call(proxy.context, data.query.results.Videoi);视频处理模块主要有3种子功能：获取信息、展示信息、播放视频：代码如下:var videos = / 初始化播放器代码，开始播放getPlayer: function (id) return + + + +height=255 +width=400 +id=uvp_fop +allowFullScreen=true +src= +type=application/x-shockwave-flash +flashvars=id=v + id + &eID=&lang
10、=us&ympsc=&enableFullScreen=1&shareEnable=1 +/ +;,/ 拼接信息显示内容，然后在append到li的底部里显示updateList: function (data) var id,html = ,info;if (data.query) data = data.query.results.Video;id = data.id;html += ;html += + data.title + ;html += + data.copyrightYear + , + data.label + ;if (data.Album) html += Album:
11、 + data.Album.Release.title + , + data.Album.Release.releaseYear + ;html += play;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, video
12、s); /执行代理职责，并传入videos.updateList回调函数return;if (info.style.display = none) info.style.display = ; else info.style.display = none;现在可以处理点击事件的代码了，由于有很多a连接，如果每个连接都绑定事件的话，显然性能会有问题，所以我们将事件绑定在元素上，然后检测点击的是否是a连接，如果是说明我们点击的是视频地址，然后就可以播放了：代码如下:$(vids).onclick = function (e) var src, id;e = e | window.event;src
13、 = e.target | e.srcElement;/ 不是连接的话就不继续处理了if (src.nodeName.toUpperCase() != A) return;/停止冒泡if (typeof e.preventDefault = function) e.preventDefault();e.returnValue = false;id = src.href.split(-)1;/如果点击的是已经生产的视频信息区域的连接play，就开始播放/ 然后return不继续了if (src.className = play) src.parentNode.innerHTML = videos.getPlayer(id);return;src.parentNode.id = v + id;video
