设计模式学习（四）

最新推荐文章于 2025-02-24 15:21:59 发布

原创最新推荐文章于 2025-02-24 15:21:59 发布 · 175 阅读

1 ·

CC 4.0 BY-SA版权

设计模式专栏收录该内容

7 篇文章

订阅专栏

本文介绍了代理模式的概念及其在图片预加载中的应用。通过一个简单的JavaScript实例展示了如何使用代理模式来实现图片的异步加载，提高用户体验。

3.代理模式

（比如，明星都有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后，再把合同交给明星签。）

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。

应用：

1>图片预加载（由于图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。常见的做法是先用一张loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到 img 节点里，这种场景就很适合使用虚拟代理。）

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( 'loader.gif' ); 
			img.src = src; 
		} 
	} 
})(); 
proxyImage.setSrc( 'blog1.jpg' );