javascript设计模式-（五）

代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景。比如，明星都 有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演 出的细节和报酬都谈好之后，再把合同交给明星签。

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身 对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之 后，再把请求转交给本体对象。

虚拟代理

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

虚拟代理实现图片预加载

	var myImage=(function(){
		var imgNode=document.createElement("img");
		document.getElementById("contentBox").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/YQ/Desktop/QQ%E6%88%AA%E5%9B%BE20161124145232.png");//默认图片
				img.src=src;
			}
		};
	})();` 
		</pre>

分时函数

在短时间内往页面中大量添加 DOM节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死，这个问题的解决方案之一是下面的 timeChunk 函数， timeChunk 函数让创建节点的工作分批进 行，比如把 1秒钟创建 1000个节点，改为每隔 200毫秒创建 8个节点。

	var timeChunk = function(ary, fn, count) {
		var obj,
			t;
		var len = ary.length;
		var start = function() {
			for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
				var obj = ary.shift();
				fn(obj);
			}
		};
		return function() {
			t = setInterval(function() {
				if (ary.length === 0) { // 如果全部节点都已经被创建好
					return clearInterval(t);
				}
				start();
			}, 200); // 分批执行的时间间隔，也可以用参数的形式传入
		};
	};

	var ary = [];
	for (var i = 1; i <= 1000; i++) {
		ary.push(i);
	};
	var renderFriendList = timeChunk(ary, function(n) {
		var div = document.createElement('div');
		div.innerHTML = n;
		document.getElementById("contentBox").appendChild(div);
	}, 8);
	renderFriendList();