JS 设计模式六 -- 代理模式

概念

为一个对象提供一个代用品或占位符，以便控制对它的访问。

当客户不方便直接访问一个对象的时候，需要提供一个替身对象来控制对这个对象的访问。

替身对象对请求做出一些处理之后，再把请求转交给本体对象。

实现

代理模式共有三种：保护代理、虚拟代理、缓存代理

保护代理：

用于控制不同权限的对象对目标权限的访问，实现访问访问主题的控制行为。

// 主体，发送消息

function sendMsg(msg) {

    console.log(msg);

}

// 代理，对消息进行过滤

function proxySendMsg(msg) {

    // 无消息则直接返回

    if (typeof msg === 'undefined') {

        console.log('No Msg');

        return;

    }

    // 有消息则进行过滤

    msg = "收到的msg是：" + msg;

    sendMsg(msg);

}

sendMsg("msg1"); // msg1

proxySendMsg('msg2'); // 收到的msg是：msg2

proxySendMsg(); // No Msg

虚拟代理

虚拟代理用于控制对创建开销很大的本体访问，它会把本体的实例化推迟到有方法被调用的时候，是最常用的一种代理。

使用虚拟代理来实现图片预加载

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("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");

            img.src = src;

        }

    }

})();

// 调用方式

ProxyImage.setSrc("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png");

使用虚拟代理实现函数防抖

// 函数防抖，频繁操作中不处理，直到操作完成之后（再过 delay 的时间）才一次性处理，执行最后一次操作

function debounce(fn, delay) {

    delay = delay || 200;

    var timer = null;

    return function() {

        var arg = arguments;

        // 每次操作时，清除上次的定时器

        clearTimeout(timer);

        timer = null;

        // 定义新的定时器，一段时间后进行操作

        timer = setTimeout(function() {

            fn.apply(this, arg);

        }, delay);

    }

};

var count = 0;

// 主体

function scrollHandle(e) {

    console.log(e.type, ++count); // scroll

}

// 代理

var proxyScrollHandle = (function() {

    return debounce(scrollHandle, 500);

})();

window.onscroll = proxyScrollHandle;

缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的缓存，在下一次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。

使用缓存代理计算乘法、加法

// 计算乘法

var mult = function(){

    var a = 1;

    for(var i = 0,ilen = arguments.length; i < ilen; i+=1) {

        a = a*arguments[i];

    }

    return a;

};

// 计算加法

var plus = function(){

    var a = 0;

    for(var i = 0,ilen = arguments.length; i < ilen; i+=1) {

        a += arguments[i];

    }

    return a;

}

// 代理函数

var proxyFunc = 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);

    }

};

var proxyMult = proxyFunc(mult);

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

console.log(proxyMult(1,2,3,4)); // 缓存取 24

var proxyPlus = proxyFunc(plus);

console.log(proxyPlus(1,2,3,4));  //

console.log(proxyPlus(1,2,3,4));  // 缓存取 10

巴特西

JS 设计模式六 -- 代理模式

概念

实现

最新文章

热门文章