代理模式

最新推荐文章于 2025-09-10 22:30:00 发布

转载最新推荐文章于 2025-09-10 22:30:00 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3407699/blog/3042591

文章标签：

#后端 #python

2019独角兽企业重金招聘Python工程师标准>>>

虚拟代理

把开销大的操作等到需要执行创建的时候再去执行创建

    var myImage = +function () {
        var imgNode = document.createElement('img');
        document.body.appendChild(imgNode);
        return {
            setSrc: function (src) {
                imgNode.src = src;
            }
        };
    }();
    var proxyImg = !function () {
        var img = new Image();
        img.onload = function () {
            myImage.setSrc(this.src);
        }
        return {
            setSrc: function (src) {
                myImage.setSrc('加载菊花图.gif');//loading图片路径
                img.src = src;
            }
        }
    }();
    // 调用
    proxyImg.setSrc('http:xxxxx.com/xx.jpg');

意义

proxyImg代理负责预加载图片，预加载操作完成后，把请求重新交给本体myImage;
proxyImg代理负责预加载图片，本地负责设置图片src，如果某天我们不需要预加载了，直接去掉预加载模块，调用本地就好

代理和本体接口的一致性

用户可以放心使用代理，他只关心是否能得到结果
在任何可以使用本体的地方都可以使用代理代替本体

虚拟代理合并http请求

在element的tree组件的使用中，根据勾选的node节点，向后端请求数据，由于绑定了change事件，每次勾选一个节点就会向后端请求一次，如果快速勾选多个就会有多个请求下面见代码：

// 每次勾选都会请求数据
doAjax(idList) {
    console.log('请求数据'，idList);
},
handleCheck (data, checked) {
    this.idList = [];
      for (let value of checked.checkedNodes) {
        if (value.isLeaf && value.id) {
          this.idList.push(value.id);
        }
      }
      this.doAjax(this.idList);
}
// 下面使用代理
data() {
    return {
        cache: [],
        idList: [],
        timeId: null
    };
}
doAjax(idList) {
    console.log('请求数据'，idList);
},
handleCheck (data, checked) {
    this.idList = [];
      for (let value of checked.checkedNodes) {
        if (value.isLeaf && value.id) {
          this.idList.push(value.id);
        }
      }
      this.proxyCheck(this.idList);
}
proxyCheck (idList) {
    // 在两秒内收集id集合
    let that = this;
    cache.push(...idList);
    if(this.timeId) {
        return;
    }
    this.timeId = setTimeout(function () {
        that.doAjax(this.cache);
        clearTimeout(that.timeId);
        that.timeId = null;
        that.cache = [];
    }, 2000)
}

缓存代理

用途：可以为一些开销打的运算结果提供暂时的缓存，如果传参一样就不去重新计算
采用闭包保存缓存，下面见实例：

var mult = function () {
    var a = 1;
    for(var i = 0,len=arguments.length;i< len;i++) {
        a  = a * arguments[i];
    }
    return a;
}
// 代理函数
var creatProxyFactory = function (fn) {
    var cache = {};
    return function () {
        var args = Array.prototype.join(arguments, ',');
        if (args in cache) {
            return cache[args];
        }
        cache[args] = fn.apply(this, arguments);
    }
}
var proxyMult = creatProxyFactory(mult);
proxyMult(1,2,3,4) // 24
proxyMult(1,2,3,4) // 24 这次没有进行计算，直接从cache中读取的