标签:
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问
var myImage=(function () { var imgNode=document.createElement(‘img‘); document.body.appendChild(imgNode); return { setSrc: function (src) { imgNode.src=src; } } } )(); myImage.setSrc(‘http://xxx.com/xxx.jpg‘);
web开发中,图片预加载常见做法是先用一张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(‘loading.gif‘); img.src=src; } } })(); proxyImage.setSrc(‘http://xxx.com/xxx.jpg‘);
var MyImage=(function () { var imgNode=document.createElement(‘img‘); document.body.appendChild(imgNode); var img=new Image(); img.onload= function () { imgNode.src=img.src; }; return { setSrc: function (src) { imgNode.src=‘loading.gif‘; img.src=src; } } })(); MyImage.setSrc(‘http://xxx.com/xxx.jpg‘);
上述代码不通过代理模式,也可以实现图片预加载
但是上述代码,违反了单一职责原则
代码中,MyImage对象除了复制给img节点设置src,还要复制预加载图片
《JavaScript设计模式与开发实践》读书笔记之代理模式
标签:
原文地址:http://www.cnblogs.com/GongQi/p/4651682.html