设计模式——代理模式

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

定义

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

就像是明星，都有自己的经纪人，会负责安排商演、谈薪、推掉一些功能等。

案例

例一

小菲是个美女，有很多小帅哥追她。 我们使用代码实现它：

class XiaoFei {
    receiveLoveLetter(data) {
        const { pay, height, weight } = data;
        if (pay >= 20 && height >= 170 && weight <= 70) {
            console.log('达标')
        }
    }
}
const manInfo = [
    { pay: 10, height: 180, weight: 80 },
    { pay: 12, height: 190, weight: 76 },
    { pay: 20, height: 170, weight: 81 },
    { pay: 13, height: 181, weight: 85 },
    { pay: 30, height: 182, weight: 70 },
    { pay: 250, height: 176, weight: 70 },
]
const xiaofei = new XiaoFei();
for (let info of manInfo) {
    xiaofei.receiveLoveLetter(info);
}

她每天要处理大量的情书。她很苦恼，于是找了小红，告诉小红帮自己筛选出年薪20万、身高170以上、体重70kg一下的男生。此时，小红就是小菲的代理。

class XiaoFei {
    receiveLoveLetter(data) {
        console.log('达标')
    }
}
class XiaoHong {
    constructor() {
        this.xiaofei = new XiaoFei();
    }
    receiveLoveLetter(data) { 
        const { pay, height, weight } = data;
        if (pay >= 20 && height >= 170 && weight <= 70) {
            this.xiaofei.receiveLoveLetter(data)
        }
    }
}
const xiaohong = new XiaoHong();
const manInfo = [
    ...
]
for (let info of manInfo) {
    xiaohong.receiveLoveLetter(info);
}

这样小红就把不达标的追求者提前淘汰，小菲不需要处理大量的信息。是不是很像我们平时做的鉴权功能？

例二

图片预加载，loadImg负责图片的加载，setUrl复制加载完成后，设置url。看似简单的设计，实则把整体逻辑拆分为加载、渲染两部分。

const imgBg = document.getElementsByClassName('img-bg')[0];
function loadImg(url) {
    const img = new Image();
    img.src = url,
    img.onload = function() {
        setUrl(url)
    }
}
function setUrl(url) {
    imgBg.src = url;
}
loadImg('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs2.best-wallpaper.net%2Fwallpaper%2F2560x1600%2F1906%2FTree-lake-sunset-dusk_2560x1600.jpg&refer=http%3A%2F%2Fs2.best-wallpaper.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645067312&t=4603e1ee4084f0140b432147362e157c')

缓存代理

首先实现一个累加的函数mult，这个函数可以把它接收到的参数累加起来，然后return。

然后实现一个代理函数proxyMult用来缓存结果，第二次执行proxyMult时，拿到的就是缓存中的结果，这种模式在面试中的编程题coding部分非常常见。

const mult = function() {
    var a = 1;
    for (var i = 0, l = arguments.length; i < l; i++) {
        a = a * arguments[i]
    }
    return a;
}
var proxyMult = (function() {
    var cache = {};
    return function() {
        var args = Array.prototype.join.call(arguments, ', ');
        if (args in cache) {
            return cache[args];
        }
        return cache[args] = mult.apply(this, arguments)
    }
})()
proxyMult(1, 2, 3, 4)
proxyMult(1, 2, 3, 4)

总结

代理模式，是比较常见的开发设计模式。可以把复杂的业务逻辑进行了合理的拆分，使整个代码机构更简单明了，实现函数功能单一化，是开发过程中时非常实用的。