JavaScript设计模式之代理模式

代理，顾名思义就是帮助别人做事，GoF对代理模式的定义如下：

成都创新互联专注于果洛州网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供果洛州营销型网站建设，果洛州网站制作、果洛州网页设计、果洛州网站官网定制、小程序开发服务，打造果洛州网络公司原创品牌,更为您提供果洛州网站排名全网营销落地服务。

代理模式(Proxy)，为其他对象提供一种代理以控制对这个对象的访问。

代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西。

正文

我们来举一个简单的例子，假如dudu要送酸奶小妹玫瑰花，却不知道她的联系方式或者不好意思，想委托大叔去送这些玫瑰，那大叔就是个代理(其实挺好的，可以扣几朵给媳妇)，那我们如何来做呢?

 
 
 
 
    
  
  
  
  
  1. // 先声明美女对象  
    2. 
  
  
  
  
  2. var girl = function (name) {  
    3. 
  
  
  
  
  3.     this.name = name;  
    4. 
  
  
  
  
  4. };  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. // 这是dudu  
    7. 
  
  
  
  
  7. var dudu = function (girl) {  
    8. 
  
  
  
  
  8.     this.girl = girl;  
    9. 
  
  
  
  
  9.     this.sendGift = function (gift) {  
    10. 
  
  
  
  
  10.         alert("Hi " + girl.name + ", dudu送你一个礼物：" + gift);  
    11. 
  
  
  
  
  11.     }  
    12. 
  
  
  
  
  12. };  
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. // 大叔是代理  
    15. 
  
  
  
  
  15. var proxyTom = function (girl) {  
    16. 
  
  
  
  
  16.     this.girl = girl;  
    17. 
  
  
  
  
  17.     this.sendGift = function (gift) {  
    18. 
  
  
  
  
  18.         (new dudu(girl)).sendGift(gift); // 替dudu送花咯  
    19. 
  
  
  
  
  19.     }  
    20. 
  
  
  
  
  20. }; 
    21.

调用方式就非常简单了：

 
 
 
 
    
  
  
  
  
  1. var proxy = new proxyTom(new girl("酸奶小妹"));  
    2. 
  
  
  
  
  2. proxy.sendGift("999朵玫瑰"); 
    3.

实战一把

通过上面的代码，相信大家对代理模式已经非常清楚了，我们来实战下：我们有一个简单的播放列表，需要在点击单个连接(或者全选)的时候在该连接下方显示视频曲介绍以及play按钮，点击play按钮的时候播放视频，列表结构如下：

 
 
 
 
    
  
  
  
  
  1. Dave Matthews vids
     
    2. 
  
  
  
  
  2. 全选/反选
     
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.   
  5. Gravedigger
    6.  
  
  
  
  
  6.   
  7. Save Me
    8.  
  
  
  
  
  8.   
  9. Crush
    10.  
  
  
  
  
  10.   
  11. Don't Drink The Water
    12.  
  
  
  
  
  12.   
  13. Funny the Way It Is
    14.  
  
  
  
  
  14.   
  15. What Would You Say 
    16. 
  
  
  
  
  16.  
  
  
  
  
 

我们先来分析如下，首先我们不仅要监控a连接的点击事件，还要监控“全选/反选”的点击事件，然后请求服务器查询视频信息，组装HTML信息显示在li元素的最后位置上，效果如下：

然后再监控play连接的点击事件，点击以后开始播放，效果如下：

好了，开始，没有jQuery，我们自定义一个选择器：

 
 
 
 
    
  
  
  
  
  1. var $ = function (id) {  
    2. 
  
  
  
  
  2.     return document.getElementById(id);  
    3. 
  
  
  
  
  3. }; 
    4.

由于Yahoo的json服务提供了callback参数，所以我们传入我们自定义的callback以便来接受数据，具体查询字符串拼装代码如下：

 
 
 
 
    
  
  
  
  
  1. var http = {  
    2. 
  
  
  
  
  2.     makeRequest: function (ids, callback) {  
    3. 
  
  
  
  
  3.         var url = 'http://query.yahooapis.com/v1/public/yql?q=',  
    4. 
  
  
  
  
  4.             sql = 'select * from music.video.id where ids IN ("%ID%")',  
    5. 
  
  
  
  
  5.             format = "format=json",  
    6. 
  
  
  
  
  6.             handler = "callback=" + callback,  
    7. 
  
  
  
  
  7.             script = document.createElement('script');  
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.             sql = sql.replace('%ID%', ids.join('","'));  
    10. 
  
  
  
  
  10.             sql = encodeURIComponent(sql);  
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.             url += sql + '&' + format + '&' + handler;  
    13. 
  
  
  
  
  13.             script.src = url;  
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.         document.body.appendChild(script);  
    16. 
  
  
  
  
  16.     }  
    17. 
  
  
  
  
  17. }; 
    18.

代理对象如下：

 
 
 
 
    
  
  
  
  
  1. var proxy = {  
    2. 
  
  
  
  
  2.     ids: [],  
    3. 
  
  
  
  
  3.     delay: 50,  
    4. 
  
  
  
  
  4.     timeout: null,  
    5. 
  
  
  
  
  5.     callback: null,  
    6. 
  
  
  
  
  6.     context: null,  
    7. 
  
  
  
  
  7.     // 设置请求的id和callback以便在播放的时候触发回调  
    8. 
  
  
  
  
  8.     makeRequest: function (id, callback, context) {  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.         // 添加到队列dd to the queue  
    11. 
  
  
  
  
  11.         this.ids.push(id);  
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.         this.callback = callback;  
    14. 
  
  
  
  
  14.         this.context = context;  
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.         // 设置timeout  
    17. 
  
  
  
  
  17.         if (!this.timeout) {  
    18. 
  
  
  
  
  18.             this.timeout = setTimeout(function () {  
    19. 
  
  
  
  
  19.                 proxy.flush();  
    20. 
  
  
  
  
  20.             }, this.delay);  
    21. 
  
  
  
  
  21.         }  
    22. 
  
  
  
  
  22.     },  
    23. 
  
  
  
  
  23.     // 触发请求，使用代理职责调用了http.makeRequest  
    24. 
  
  
  
  
  24.     flush: function () {  
    25. 
  
  
  
  
  25.         // proxy.handler为请求yahoo时的callback  
    26. 
  
  
  
  
  26.         http.makeRequest(this.ids, 'proxy.handler');   
    27. 
  
  
  
  
  27.         // 请求数据以后，紧接着执行proxy.handler方法（里面有另一个设置的callback)  
    28. 
  
  
  
  
  28.           
    29. 
  
  
  
  
  29.         // 清楚timeout和队列  
    30. 
  
  
  
  
  30.         this.timeout = null;  
    31. 
  
  
  
  
  31.         this.ids = [];  
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33.     },  
    34. 
  
  
  
  
  34.     handler: function (data) {  
    35. 
  
  
  
  
  35.         var i, max;  
    36. 
  
  
  
  
  36.  
    37. 
  
  
  
  
  37.         // 单个视频的callback调用  
    38. 
  
  
  
  
  38.         if (parseInt(data.query.count, 10) === 1) {  
    39. 
  
  
  
  
  39.             proxy.callback.call(proxy.context, data.query.results.Video);  
    40. 
  
  
  
  
  40.             return;  
    41. 
  
  
  
  
  41.         }  
    42. 
  
  
  
  
  42.  
    43. 
  
  
  
  
  43.         // 多个视频的callback调用  
    44. 
  
  
  
  
  44.         for (i = 0, max = data.query.results.Video.length; i < max; i += 1) {  
    45. 
  
  
  
  
  45.             proxy.callback.call(proxy.context, data.query.results.Video[i]);  
    46. 
  
  
  
  
  46.         }  
    47. 
  
  
  
  
  47.     }  
    48. 
  
  
  
  
  48. }; 
    49.

视频处理模块主要有3种子功能：获取信息、展示信息、播放视频：

 
 
 
 
    
  
  
  
  
  1. var videos = {  
    2. 
  
  
  
  
  2.     // 初始化播放器代码，开始播放  
    3. 
  
  
  
  
  3.     getPlayer: function (id) {  
    4. 
  
  
  
  
  4.         return '' +  
    5. 
  
  
  
  
  5.             '' +  
    6. 
  
  
  
  
  6.             '' +  
    7. 
  
  
  
  
  7.             '' +  
    8. 
  
  
  
  
  8.             '' +  
    9. 
  
  
  
  
  9.             '
  
  
  
  
  10.             'height="255" ' +  
    11. 
  
  
  
  
  11.             'width="400" ' +  
    12. 
  
  
  
  
  12.             'id="uvp_fop" ' +  
    13. 
  
  
  
  
  13.             'allowFullScreen="true" ' +  
    14. 
  
  
  
  
  14.             'src="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" ' +  
    15. 
  
  
  
  
  15.             'type="application/x-shockwave-flash" ' +  
    16. 
  
  
  
  
  16.             'flashvars="id=v' + id + '&eID=1301797&lang=us&ympsc=4195329&enableFullScreen=1&shareEnable=1"' +  
    17. 
  
  
  
  
  17.             '\/>' +  
    18. 
  
  
  
  
  18.             '<\/object>';  
    19. 
  
  
  
  
  19.                 },  
    20. 
  
  
  
  
  20.     // 拼接信息显示内容，然后在append到li的底部里显示  
    21. 
  
  
  
  
  21.     updateList: function (data) {  
    22. 
  
  
  
  
  22.         var id,  
    23. 
  
  
  
  
  23.             html = '',  
    24. 
  
  
  
  
  24.             info;  
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.         if (data.query) {  
    27. 
  
  
  
  
  27.             data = data.query.results.Video;  
    28. 
  
  
  
  
  28.         }  
    29. 
  
  
  
  
  29.         id = data.id;  
    30. 
  
  
  
  
  30.         html += '';  
    31. 
  
  
  
  
  31.         html += '
    ' + data.title + '<\/h2>';  
    32. 
  
  
  
  
  32.         html += '
    ' + data.copyrightYear + ', ' + data.label + '<\/p>';  
    33. 
  
  
  
  
  33.         if (data.Album) {  
    34. 
  
  
  
  
  34.             html += '
    Album: ' + data.Album.Release.title + ', ' + data.Album.Release.releaseYear + '';  
    35. 
  
  
  
  
  35.         }  
    36. 
  
  
  
  
  36.         html += '
    » play<\/a><\/p>';  
    37. 
  
  
  
  
  37.         info = document.createElement('div');  
    38. 
  
  
  
  
  38.         info.id = "info" + id;  
    39. 
  
  
  
  
  39.         info.innerHTML = html;  
    40. 
  
  
  
  
  40.         $('v' + id).appendChild(info);  
    41. 
  
  
  
  
  41.     },  
    42. 
  
  
  
  
  42.     // 获取信息并显示  
    43. 
  
  
  
  
  43.     getInfo: function (id) {  
    44. 
  
  
  
  
  44.         var info = $('info' + id);  
    45. 
  
  
  
  
  45.  
    46. 
  
  
  
  
  46.         if (!info) {  
    47. 
  
  
  
  
  47.             proxy.makeRequest(id, videos.updateList, videos); //执行代理职责，并传入videos.updateList回调函数  
    48. 
  
  
  
  
  48.             return;  
    49. 
  
  
  
  
  49.         }  
    50. 
  
  
  
  
  50.  
    51. 
  
  
  
  
  51.         if (info.style.display === "none") {  
    52. 
  
  
  
  
  52.             info.style.display = '';  
    53. 
  
  
  
  
  53.         } else {  
    54. 
  
  
  
  
  54.             info.style.display = 'none';  
    55. 
  
  
  
  
  55.         }  
    56. 
  
  
  
  
  56.     }  
    57. 
  
  
  
  
  57. }; 
    58.

现在可以处理点击事件的代码了，由于有很多a连接，如果每个连接都绑定事件的话，显然性能会有问题，所以我们将事件绑定在

    元素上，然后检测点击的是否是a连接，如果是说明我们点击的是视频地址，然后就可以播放了：

     
 
 
 
      
  
  
  
  
    1. $('vids').onclick = function (e) {  
      2. 
  
  
  
  
    2.     var src, id;  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.     e = e || window.event;  
      5. 
  
  
  
  
    5.     src = e.target || e.srcElement;  
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     // 不是连接的话就不继续处理了  
      8. 
  
  
  
  
    8.     if (src.nodeName.toUpperCase() !== "A") {  
      9. 
  
  
  
  
    9.         return;  
      10. 
  
  
  
  
    10.     }  
      11. 
  
  
  
  
    11.     //停止冒泡  
      12. 
  
  
  
  
    12.     if (typeof e.preventDefault === "function") {  
      13. 
  
  
  
  
    13.         e.preventDefault();  
      14. 
  
  
  
  
    14.     }  
      15. 
  
  
  
  
    15.     e.returnValue = false;  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.     id = src.href.split('--')[1];  
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     //如果点击的是已经生产的视频信息区域的连接play，就开始播放  
      20. 
  
  
  
  
    20.     // 然后return不继续了  
      21. 
  
  
  
  
    21.     if (src.className === "play") {  
      22. 
  
  
  
  
    22.         src.parentNode.innerHTML = videos.getPlayer(id);  
      23. 
  
  
  
  
    23.         return;  
      24. 
  
  
  
  
    24.     }  
      25. 
  
  
  
  
    25.           
      26. 
  
  
  
  
    26.     src.parentNode.id = "v" + id;  
      27. 
  
  
  
  
    27.     videos.getInfo(id); // 这个才是第一次点击的时候显示视频信息的处理代码  
      28. 
  
  
  
  
    28. }; 
      29.

       

      全选反选的代码大同小异，我们就不解释了：

        
  
  
  
        
   
   
   
   
      1. $('toggle-all').onclick = function (e) {  
        2. 
   
   
   
   
      2.  
        3. 
   
   
   
   
      3.     var hrefs, i, max, id;  
        4. 
   
   
   
   
      4.  
        5. 
   
   
   
   
      5.     hrefs = $('vids').getElementsByTagName('a');  
        6. 
   
   
   
   
      6.     for (i = 0, max = hrefs.length; i < max; i += 1) {  
        7. 
   
   
   
   
      7.         // 忽略play连接  
        8. 
   
   
   
   
      8.         if (hrefs[i].className === "play") {  
        9. 
   
   
   
   
      9.             continue;  
        10. 
   
   
   
   
      10.         }  
        11. 
   
   
   
   
      11.         // 忽略没有选择的项  
        12. 
   
   
   
   
      12.         if (!hrefs[i].parentNode.firstChild.checked) {  
        13. 
   
   
   
   
      13.             continue;  
        14. 
   
   
   
   
      14.         }  
        15. 
   
   
   
   
      15.  
        16. 
   
   
   
   
      16.         id = hrefs[i].href.split('--')[1];  
        17. 
   
   
   
   
      17.         hrefs[i].parentNode.id = "v" + id;  
        18. 
   
   
   
   
      18.         videos.getInfo(id);  
        19. 
   
   
   
   
      19.     }  
        20. 
   
   
   
   
      20. }; 
        21.

      完整代码：https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/proxy.html

      总结

      代理模式一般适用于如下场合：

      ◆ 远程代理，也就是为了一个对象在不同的地址空间提供局部代表，这样可以隐藏一个对象存在于不同地址空间的事实，就像web service里的代理类一样。

      ◆ 虚拟代理，根据需要创建开销很大的对象，通过它来存放实例化需要很长时间的真实对象，比如浏览器的渲染的时候先显示问题，而图片可以慢慢显示(就是通过虚拟代理代替了真实的图片，此时虚拟代理保存了真实图片的路径和尺寸。

      ◆ 安全代理，用来控制真实对象访问时的权限，一般用于对象应该有不同的访问权限。

      ◆ 智能指引，只当调用真实的对象时，代理处理另外一些事情。例如C#里的垃圾回收，使用对象的时候会有引用次数，如果对象没有引用了，GC就可以回收它了。

      参考：《大话设计模式》

      原文：http://www.cnblogs.com/TomXu/archive/2012/02/29/2354979.html

      网页题目：JavaScript设计模式之代理模式
      网页路径：http://www.mswzjz.com/qtweb/news32/191232.html

      网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

      广告

      声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

电子商务知识

分类信息网

德阳服务器托管　　 　证企宝　　 　绵竹网站建设　　 　香港云服务器　　 　店面门头广告　　 　云服务器　　 　贵安服务器托管　　 　广汉锦华建材　　 　外贸营销网站建设　　 　成都响应式网站　　 　古巴雪茄　　 　成都主机租用　　 　成都网站推广营销　　 　东方电机技改　　 　电子商务商城网站　　 　蓬溪网站建设　　 　蜀锦在线　　 　木包装箱　　 　梅州网站建设　　 　混凝土密封固化剂