码迷,mamicode.com
首页 > 编程语言 > 详细

《JavaScript设计模式与开发实践》读书笔记之代理模式

时间:2015-07-16 19:20:59      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

1.代理模式

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

1.1 一般的图片加载

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‘);

1.2 虚拟代理实现图片预加载

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‘);

1.3 不用代理的预加载图片实现方式

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!