JS设计模式之代理模式详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS设计模式之代理模式详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2261字，纯文字阅读大概需要4分钟。

内容图文

这次给大家带来JS设计模式之代理模式详解，JS代理模式的注意事项有哪些，下面就是实战案例，一起来看一下。

概念：代理模式就是为一个对象提供一个代用品或者占位符，以便控制对它的访问。也就是为了保障当前对象的单一职责，而需要创建另一个对象来处理当前对象的一些逻辑以提高代码效率判定状态等，代理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西，常见的代理有远程代理，虚拟代理，安全代理，智能指引，我主要介绍最常见的两种代理模式就是虚拟代理。

作用和注意事项
1.远程代理（一个空间将不同空间的的对象进行局部代理）
2.虚拟代理（需要创建开销很大的对象，如图片加载）
3.安全代理（控制真实对象的访问权限）
4.智能引导（调用对象代理处理另外的一些事情，如垃圾回收机制）
注意事项：
不能滥用代理，有时候仅仅会增加代码的复杂程度。

我们来看虚拟代理实现图片预加载

// 图片加载函数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("file://c:/loading.png");
            img.src = src;
        }
    }
})();// 调用代理对象加载图片proxyImage.setSrc( "http://images/qq.jpg");

另一个就是虚拟代理合并http请求

// 文件同步函数var synchronousFile = function( id ){
    console.log( "开始同步文件，id为：" + id );
}// 使用代理合并请求var proxySynchronousFile = (function(){
    var cache = [], // 保存一段时间内需要同步的ID
        timer; // 定时器指针
    return function( id ){
        cache[cache.length] = id;        if( timer ){            return;
        }
        timer = setTimeout( function(){
            proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
            clearTimeout( timer ); // 清空定时器
            timer = null;
            cache = [];
        },2000 );
    }
})();// 绑定点击事件var checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++]; ){
    c.onclick = function(){
        if( this.checked === true ){            // 使用代理进行文件同步
            proxySynchronousFile( this.id );
        }
    }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

JS设计模式之建造者模式详解

JS的设计模式之构造函数模式详解

js设计模式之-单例模式的使用

以上就是JS设计模式之代理模式详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JS设计模式之代理模式详解全部内容，希望文章能够帮你解决JS设计模式之代理模式详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---