javascript代理模式(proxy)

代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。

保护代理模式,指某些请求不符合要求,可以直接在代理对象中拒绝,不必通过被代理对象。

虚拟代理模式,是指把一些开销很大的对象延迟到真正需要的时候才去创建。是最常用的一种代理模式。

虚拟代理实现图片预加载

我们经常会遇到因为网络不佳或是图片太大,图片一时加载不出来,常见的做啊是先使用一张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( 'http://xxx.dlmu.edu.cn/zll/img/lu.jpg' );   //代理对象设置的占位符
    				img.src = src;
    			}
    		};
    	})();
    	proxyImage.setSrc( 'http://xxx.dlmu.edu.cn/zll/img/1.jpg' );         

限制浏览器的网速后可以明显的看到占位图片的存在。


代理模式的意义

面向对象设计有五大原则:单一职责原则,开放封闭原则,里氏替换原则,依赖倒置原则,接口隔离原则。

其中单一职责原则是指一个类(包括对象和函数等)应该仅有一个引起它变化的原因。而职责被定义为引起变化的原因。使用代理模式则将myImage原本加载图片的职责分离出来由代理模式执行,自己只用负责创建img节点即可。

这两个功能各自分离,不会互相影响,通过代理模式给本体增加了新的功能,这也是符合开放封闭原则的。

而且如果不需要代理模式中的功能后,可以直接请求本体,这一点的关键是本体和代理对象都对外界提供了setSrc方法



你可能感兴趣的:(javascript)