代理模式

解决哪一类问题

从字面意思上理解，代理模式解决对一个对象的直接访问，这种直接访问可能是"不方便"的，所谓"不方便"可能是直接访问成本比较大(在前端领域通常是要获取后台数据或者执行复杂的计算)，或者需要对原始对象进行一些修饰或处理。

实现原理

实现一个代理对象，这个代理对象和原对象对外暴露相同的接口，用户直接操作代理对象，对于说对用户是透明的，用户并不知道有代理存在。

虚拟代理

把一些昂贵的操作放在代理对象中进行，现在体会的还不是很深刻，具体例子没想好，以后补充。

缓存代理

把昂贵操作产生的数据缓存在代理对象中，避免了重复操作

    // 假设a*b是个昂贵的操作

    function calculate(a, b) {

        return a*b

    }

    var proxyCalculate = (function() {

        var cache = {}

        return function(a, b) {

            var ab = '' + a + '_' + b

            if (ab in cache) {

                return cache[ab]

            }

            return cache[ab] = calculate(a, b)

        }

    })()

    var a = 99999, b = 99999

    proxyCalculate(a, b)

实践中的应用

利用代理来做节流操作

直接copy书上的代码

假设我们在做一个文件同步的功能，当我们选中一个 checkbox 的时候，它对应的文件就会被同步到另外一台备用服务器上面，当我们选中 3 个 checkbox 的时候，依次往服务器发送了 3 次同步文件的请求,

可以预见，如此频繁的网络请求将会带来相当大的开销。

<body>

    <input type="checkbox" id="1"></input>1

    <input type="checkbox" id="2"></input>2

    <input type="checkbox" id="3"></input>3

    <input type="checkbox" id="4"></input>4

    <input type="checkbox" id="5"></input>5

    <input type="checkbox" id="6"></input>6

    <input type="checkbox" id="7"></input>7

    <input type="checkbox" id="8"></input>8

    <input type="checkbox" id="9"></input>9

</body>

    var synchronousFile = function( id ){

        console.log( '开始同步文件，id 为: ' + id );

    };

    var proxySynchronousFile = (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; // 清空 ID 集合

        }, 2000 );

    }// 2 秒后向本体发送需要同步的 ID 集合

    })();

    var checkbox = document.getElementsByTagName( 'input' );

    for ( var i = 0, c; c = checkbox[ i++ ]; ){

        c.onclick = function(){

            if (this.checked === true){

                proxySynchronousFile( this.id );

            }

        }

    }

js设计模式总结-代理模式的更多相关文章

js设计模式——1.代理模式
js设计模式——1.代理模式以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...
js设计模式之代理模式以及订阅发布模式
为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文 ...
JS 设计模式六 -- 代理模式
概念为一个对象提供一个代用品或占位符,以便控制对它的访问. 当客户不方便直接访问一个对象的时候,需要提供一个替身对象来控制对这个对象的访问. 替身对象对请求做出一些处理之后, 再把请求转交给本体对象 ...
浅谈js设计模式之代理模式
代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景.比如,明星都有经纪人作为代理.如果想请明星来办一场商业演出,只能联系他的经纪人.经纪人会把商业演出的细节和报酬都谈好之后,再把合同交 ...
C#设计模式(13)——代理模式（Proxy Pattern）
一.引言在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代 ...
JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
乐在其中设计模式(C#) - 代理模式(Proxy Pattern)
原文:乐在其中设计模式(C#) - 代理模式(Proxy Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 代理模式(Proxy Pattern) 作者:webabcd 介绍为 ...
Java设计模式之代理模式（静态代理和JDK、CGLib动态代理）以及应用场景
我做了个例子 ,需要可以下载源码:代理模式 1.前言: Spring 的AOP 面向切面编程,是通过动态代理实现的, 由两部分组成:(a) 如果有接口的话通过 JDK 接口级别的代理 (b) 如果没 ...
设计模式之代理模式之二(Proxy)
from://http://www.cnblogs.com/xwdreamer/archive/2012/05/23/2515306.html 设计模式之代理模式之二(Proxy) 0.前言在前 ...

随机推荐

显示python已安装模块及路径，添加修改模块搜索路径
在python交互模式下输入: help('modules') #可以显示出已安装的模块在python交互模式下输入: import sys sys.path #可以显示出模块搜索路径增加搜索路径 ...
margin padding
margin and padding有时候可以实现相同的效果但是用padding的场合更多 2者的区别和用法的细节我还是没掌握好
一个java的Profile工具
场景:我们在系统运行中,需要监控某个代码段的运行时间,我们完全可以使用currentTimeMillis来做,但是做起来比较麻烦,尤其是需要阶段监控的时候,那么这个工具就出现啦~~~ 先说下想要实现的 ...
在.NET中使用JQuery 选择器精确提取网页内容
1. 前言相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...
bitnami redmine每日自动备份
主要思路:在半夜时停止服务,进行完整备份,然后再开启服务. 1.主脚本backup.bat: call backup-stopserver.batping /n 20 127.1 >nul ca ...
.net（C#）中结构和类的区别
static void Main(string[] args) { //类型 //结构:值类型 //类:引用类型 //声明的语法:class struct //在类中,构造函数里,既可以给字段赋值,也 ...
$scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
c# winform DirectX播放器可以任意设置宽高比屏幕拉伸
第一步:dll引用 Microsoft.DirectX.dll Microsoft.DirectX.AudioVideoPlayback.dll 如果没有的话,可能需要安装微软的DRECTX JDK ...
JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid
最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累都一一解决了,其中比较典型的就 ...
MYSQL中存储过程的创建，调用及语法
MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...

js设计模式总结-代理模式