－代理模式

Posted 2020-07-07

代理模式的定义：代理模式为一个对象提供一个经纪人，以便控制对它的访问

虚拟代理：虚拟代理把一些开销很大的对象，延迟到真正需要的时候才去创建

使用虚拟代理实现图片预加载

 1 // 被代理的实际要显示的图片对象
 2 var myImage = (function(){
 3     // 创建图片dom并把引用保存在闭包里面
 4     var imgNode = document.createElement( ‘img‘ );
 5     document.body.appendChild( imgNode );
 6     return {
 7         // 这个真实的图片对象提供一个可以修改图片src的方法
 8         setSrc : function( src ){
 9             imgNode.src = src;
10         }
11     }
12 })();
13 
14 var proxyImage = (function(){
15     // 创建一个dom img对象，以后用作图片的缓存
16     img = new Image;
17     // 给这个img对象绑定一个加载完成后的事件
18     img.onload = function(){
19         // 这里传入函数的img.src实际上一开始是空白
20         // 但到了这个事件触发之后就一定会有真实值
21         myImage.setSrc(img.src);
22     }
23     return {
24         // 这个修改图片src的方法实际上做了两件事：
25         // 播放预加载图片，给缓存图片对象添加src
26         setSrc : function( src ){
27             myImage.setSrc( ‘preload.gif‘ );
28             img.src = src;
29         }
30     }
31 })();
32 
33 proxyImage.setSrc( ‘cat.jpg‘ )

 

使用代理的意义：

• 单一职责原则
• 图片预加载功能不引入任何模式也能实现，但是“管理真实图片”和“管理预加载”的代码就会混杂在一起
• 如果以后不需要预加载功能了，那么管理整个真实图片的代码都需要更改

 

代理和本体接口的一致性：

• 在不请求代理对象的时候，也可以直接请求本体达到同样的目的
• 同时如果代理对象和本体都是一个函数，那么也可以认为他们有一致的“接口”（具体代码和上面的差不多，这里就不写了）

 

虚拟代理合并http请求：

 1 var synchronousFile = function( id ){
 2     console.log( id );
 3 }
 4 
 5 // 代理对象
 6 var proxySynchronousFile = (function(){
 7     // 缓存id的数组
 8     var cache = [];
 9     // 标记惰性时间是否结束的变量
10     var timeIsNotUp = null;
11     
12     return function( id ){
13         cache.push( id );
14         if ( timeIsNotUp ) {
15             return;
16         } else{
17             timeIsNotUp = setTimeout(function(){
18                 synchronousFile( cache.join( ‘,‘ ) );
19                 clearTimeout( timeIsNotUp );
20                 timeIsNotUp = null;
21                 cache.length = 0;
22             }, 2000 );
23         };
24     }
25 })();
26 
27 // 客户操作
28 var checkboxes = document.getElementsByTagName(‘input‘);
29 for (var i = 0, checkbox ; checkbox = checkboxes[i++]; ) {
30     checkbox.onclick = function(){
31         if ( this.checked === true ) {
32             proxySynchronousFile( this.id );
33         }
34     }
35 };

 

缓存代理：可以用于算法的函数中，将以前曾经计算过的结果保存下来，如果碰到同样参数的计算时可以直接调用以前的计算

Ajax缓存代理：实现方式和上面的差不多，不过无法直接把结果缓存进代理对象中，需要使用回调的方式

用高阶函数动态创建代理：使用一个函数为多个函数统一的创造代理，那个函数有点类似于工厂模式