JavaScript设计模式与开发实践－第6章－代理模式

 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‘ )

 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 };