var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( imgNode ); return { setSrc: function( src ){ imgNode.src = src; } } })(); var proxyImage = (function(){ var img = new Image; img.onload = function(){ myImage.setSrc( this.src ); } return { setSrc: function( src ){ myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' ); img.src = src; } } })(); proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
以上代码是通过虚拟代理实现图片的懒加载
var mult = function(){ console.log( '开始计算乘积' ); var a = 1; for ( var i = 0, l = arguments.length; i < l; i++ ){ a = a * arguments[i]; } return a; }; mult( 2, 3 ); // 输出:6 mult( 2, 3, 4 ); // 输出:24 现在加入缓存代理函数: var proxyMult = (function(){ var cache = {}; return function(){ var args = Array.prototype.join.call( arguments, ',' ); if ( args in cache ){ return cache[ args ]; } return cache[ args ] = mult.apply( this, arguments ); } })(); proxyMult( 1, 2, 3, 4 ); // 输出:24 proxyMult( 1, 2, 3, 4 ); // 输出:24 当我们第二次调用proxyMult( 1, 2, 3, 4 )的时候,本体mult 函数并没有被计算,proxyMult 直接返回了之前缓存好的计算结果。
代理模式中比较常用的是缓存代理和虚拟代理,在实际开发中,你不必要想着在哪里用代理,当你直接访问一个对象不合适时,才用。