设计模式:代理模式

代理模式

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

简单点讲,就是我们被希望直接通过操作A对象的,但是直接操作太复杂了,我们希望对A对象的操作少一点,这个时候就可以使用代理模式,生成一个代理对象,把部分操作放在这个代理对象上实现。

书中举的例子是图片预加载,我们就拿这个预加载说话好了。

图片预加载

假设我们要往网页中插入一个图片节点,我们本打算这么写。

var setMyImageSrc = (function () {
  var img = document.createElement('img');
  document.body.appendChild(img);

  return function (src) {
    img.src = src;
  }
})();

setMyImageSrc('....jpg');

现在我们希望图片在加载的过程中呢,先显示一张占位图;当图片加载结束后呢,我们再替换这张图片。

代理模式的思路是这样:如果我们想要对一个对象添加功能;但是这个对象自身的功能是非常完备的;我们可以通过代理模式,添加一个代理对象,在不改动原对象的情况下,添加我们想要的功能。

在这里就是,我们需要添加一个setProxyImageSrc方法,来对setMyImageSrc添加一个预加载的功能。

var setProxyImageSrc = (function () {
  var loadingIcon = '...';
  setMyImageSrc(loadingIcon);

  var img = new Image();
  img.onload = function () {
    setMyImageSrc(img.src);
  }

  return function (src) {
    img.src = src;
  }
})();

setProxyImageSrc('jpg');

这样,在不修改setMyImageSrc源码的情况下,我们通过增加一个setProxyImageSrc的代理,就成功添加了预加载的功能。

这就是代理模式。如果谁谁谁说现在不需要这个预加载的功能了,那我们只需要去掉这一层代理就可以了;增添功能还是很方便的。

收集请求

假如有很多个checkbox,每个checkbox点击的时候都会发出一个请求,过多的点击产生的过多的请求必然会对服务器产生压力。

按照代理模式的方式,我们先给出一个基本的情景。

<div id="form">
  <input type="checkbox" id="1">
  <input type="checkbox" id="2">
  <input type="checkbox" id="3">
  <input type="checkbox" id="4">
  <input type="checkbox" id="5">
  <input type="checkbox" id="6">
  <input type="checkbox" id="7">
  <input type="checkbox" id="8">
</div>
    var form = document.getElementById('form');
    form.onclick = function (e) {
      var o = e.target;
      if (o.type === 'checkbox' && o.checked) {
        haveSomeOp(o.id);
      }
    }

    var haveSomeOp = function (id) {
      console.log(id);
    }

现在我们有个需求,就是希望收集这些请求,不要立即发出;而是到达了一个周期时间后我们再一起发出。

    var proxySomeOp = (function () {
      var cache = [];
      var timer = null;
      
      return function (id) {
        cache.push(id);
        if (!timer) {
          timer = setTimeout(function () {
            haveSomeOp(cache.join(','));
            cache = [];
            timer = null;
          }, 1000);
        }
      }
    })();

然后我们将#form的点击事件修改为proxySomeOp就好啦。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 目录 本文的结构如下: 引言 什么是代理模式 模式的结构 典型代码 代理模式分类 代码示例 代理模式和装饰者模式的...
    w1992wishes阅读 1,517评论 0 13
  • 一、概述   代理模式我们接触的就比较多了,所谓的代理模式就是,给某一个对象提供一个代理对象,并由代理对象控制对原...
    骑着乌龟去看海阅读 883评论 0 9
  • 代理模式 代理是一个对象,它可以用来控制对本体对象的访问,它与本体对象实现了同样的接口,代理对象会把所有的调用方法...
    尘中老阅读 362评论 0 0
  • 我遇到一个人,他不是我从小就憧憬的样子,但他是我确确实实想要的人。 他是个盖世英雄。他让我愿意去面对以前的...
    阿凛阿凛阅读 414评论 0 3
  • 去年七月份的时候,台风过境的消息一出来,妈就开始担心老家的房子能不能保得住。后来妈还专程跑回去看一趟,打电话给我的...
    甜橙不插电阅读 218评论 0 0