专栏首页Super 前端JavaScript设计模式--代理模式

JavaScript设计模式--代理模式

明星都有经纪人作为代理。如果请明星办一场商演,只能联系其经纪人,经纪人会把商演的细节和报酬谈好,再把合同交给明星签。

一、定义

代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。 代理分为:保护代理虚拟代理 保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现。

二、图片预加载(最常见的虚拟代理应用场景)

图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位,然后异步加载图片,待图片加载完成,把其填充到img节点里。 实现原理: 创建一个Image对象:var a = new Image(); 定义Image对象的src: a.src = “xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。

可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性,当图像处于装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束,此时complete属性为true。

(1)非代理实现

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 = "./images/loading.gif";
            img.src = src;
        }
    }
})();

myImage.setSrc("./images/originImg.png");

(2)代理实现

// 创建图片DOM
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);   // this指向img!img加载完成后,将img.src传递给myImage
    };

    return {
        setSrc: function(src) {
            myImage.setSrc("./images/loading.gif");     // loading
            img.src = src;
        }
    };
})();

proxyImage.setSrc("./images/originImg.png");

使用代理模式的好处:使每个函数功能单一,实现对象设计的“单一职责原则”!

三、文件同步

假设我们在做一个文件同步功能,当选中checkbox时候,它对应的文件就会被同步到另外一台服务器。

<body>
        <input type="checkbox" id="1" />文件1
        <input type="checkbox" id="2" />文件2
        <input type="checkbox" id="3" />文件3
        <input type="checkbox" id="4" />文件4
        <input type="checkbox" id="5" />文件5
        <input type="checkbox" id="6" />文件6
    </body>

没选中一个checkbox就同步一次,显然不太合理。因为在web开发中,最大的开销就是网络请求。 解决方案方案:通过一个代理函数来收集一段时间之内的请求,然后一次性发给服务器。

var synchronousFile = function(id) {
    console.log("开始同步文件,id为:" + id);
};

var proxySynchonousFile = (function() {
    var cache = [],     // 保存本次需要同步文件的id
        timer;          // 定时器

    return function(id) {
        cache.push(id);
        if(timer) { 
            // 不要覆盖已经启动的定时
            return;
        }

        timer = setTimeout(function(){
            synchronousFile(cache.join(","));
            clearTimeout(timer);
            timer = null;
            cache.length = 0;   // 清空缓存
        }, 2000);
    }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
    c.onclick = function() {
        if(this.checked === true) {
            proxySynchonousFile(this.id);
        }
    }
}

四、缓存代理–计算乘积(序列一模一样)

var mult = function() {
    var result = 1;
    for(var i = 0, l = arguments.length; i < l; i++) {
        result= result * arguments[i];
    }
    return result;
};

var proxyMult = (function() {
    var cache = {};     // {"1,2,3": 6}
    return function() {
        var args = Array.prototype.join.call(arguments, ",");
        if(args in cache) {
            return cache[args];
        }
        return cache[args] = mult.apply(this, arguments);
    }
})();

console.log(proxyMult(1, 2, 3));

// 改造:

var proxyFactory = function(fn) {
    var cache = {};
    return function() {
        var args = Array.prototype.join.call(arguments, ",");
        if(args in cache) {
            return cache[args];
        }
        return cache[args] = fn.apply(this, arguments);
    }   
};

console.log(proxyFactory(mult)(1, 2, 3));

转载请标明出处:http://blog.csdn.net/ligang2585116

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript设计模式--单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点。 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会...

    奋飛
  • 编写高质量代码:改善JavaScript程序建议--函数式编程

    使用call和apply方法可以把一个函数转换为方法传递给某个对象。这种行为只是临时的,函数最终并没有作为对象的方法而存在,当函数被调用后,该对象方法会自动被注...

    奋飛
  • D3.js-散点图

    奋飛
  • ES6笔记(7)-- Promise异步编程

    Promise是一种异步编程的解决方案,本质来说其实它是一种规范,Promises/A+规范

    书童小二
  • 初识promise

    new Promise( function(resolve, reject) { } );

    wade
  • JQuery分析及实现part6之动画模块功能及实现

    ihoey
  • 50道常见的js面试题

    string, boolean, number, undefined, function, object

    用户1462769
  • CV 新手避坑指南:计算机视觉常见的8个错误

    人类并不是完美的,我们经常在编写软件的时候犯错误。有时这些错误很容易找到:你的代码根本不工作,你的应用程序会崩溃。但有些 bug 是隐藏的,很难发现,这使它们更...

    AI研习社
  • 一篇文章带你看懂 Cloudflare 信息泄露事件

    近期根据Hacker News的报道,敏感信息、API 密钥被Cloudflare泄露给了随机的 requesters请求,我们为大家进行深度解读并提供解决方案...

    贺嘉
  • 为博客园添加目录的方法总结

    参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

    shirayner

扫码关注云+社区

领取腾讯云代金券