JavaScript 设计模式之代理模式

代理模式,代理(proxy)是一个对象,它可以用来控制对另一个对象的访问。

现在页面上有一个香港回归最想听的金典曲目列表:

复制代码
<ul id="container">
    <li>我的中国心</li>
    <li>东方之珠</li>
    <li>香港别来无恙</li>
    <li>偏偏喜欢你</li>
    <li>相亲相爱</li>
</ul>

需要给页面添加一个效果:每当用户点击列表中的项目时,都会弹出一条消息:我想听:${name},大致思路是给每个li元素添加一个点击事件。如下所示:

复制代码
<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>代理模式</title>
    </head>

    <body>
        <ul id="container">
            <li>我的中国心</li>
            <li>东方之珠</li>
            <li>香港别来无恙</li>
            <li>偏偏喜欢你</li>
            <li>相亲相爱</li>
        </ul>

        <script>
            const container = document.getElementById("container")

            Array.prototype.forEach.call(container.children, node => {
                node.addEventListener("click", function (e) {
                    e.preventDefault()
                    alert(`我想听: ${e.target.innerText}`)
                })
            })
        </script>
    </body>

</html>

这种方法可以满足要求,但这样做的缺点是性能开销,因为每个 li 标签都绑定到一个事件。如果列表中有数千个元素,是否绑定了数千个事件?

每个 li 都有自己的事件处理机制,但不管是哪个 li,其实都是 ul 的成员,这样可以将 li 的事件委托给父级节点 ul,让 ul 成为这些 li 的事件代理。

这样,只需要为这些 li 元素绑定一个事件,即为父级元素绑定一个事件。

复制代码
const container = document.getElementById('container')

container.addEventListener('click', function (e) {
    if (e.target.nodeName === 'LI') {
        e.preventDefault()
        alert(`我想听: ${e.target.innerText}`)
    }
})

这就是代理模式的一种使用场合,代理模式是本体不直接出现,而是让代理间接解决问题。

  • 在上面代理模式的代码中,li 并没有直接处理点击事件,而是将其委托给父级元素 ul
  • 现实生活中,明星并不是直接出来谈生意,而是交给他们的经纪人,也就是明星的代理人。

代理模式的应用非常广泛,再来看另一个适用场景。假设有一个计算函数,参数是字符串,计算比较耗时。同时,这是一个纯函数,如果参数相同,则函数的返回值将相同。

复制代码
function compute(str) {    
    // 假设这个函数执行时间很长
    console.info("===> 超级计算开始了......");
    return `输入:${str}`;
}

现在需要给这个函数添加一个缓存函数:每次计算后,存储参数和对应的结果。在接下来的计算中,会先从缓存中查询计算结果。当然,可以直接修改这个函数的功能。但这并不好,因为缓存不是这个功能的固有特性。

更好的解决方案是使用代理模式。

复制代码
const cached = (fn) => {
    const cache = Object.create(null);
    return (str) => {
        const hit = cache[str];
        return hit || (cache[str] = fn(str));
    };
};
const cacheCompute = cached(compute);
console.log(cacheCompute("DevPoint"));
console.log(cacheCompute("DevPoint"));
console.log(cacheCompute("juejin"));

这样,就可以在不修改原函数逻辑的情况下为其扩展计算函数,这是代理模式的另一种使用场景,它允许向原始对象本身添加额外的功能,而无需更改它。

相关推荐
半夏知半秋3 小时前
游戏登录方案中常见的设计模式整理
服务器·开发语言·笔记·学习·游戏·设计模式·lua
Asort7 小时前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式
原来是好奇心7 小时前
告别if-else!使用策略模式优雅处理多种MQTT消息类型
java·mqtt·设计模式·策略模式·emqx
AY呀8 小时前
# 从 HTML5 敲击乐到前端工程化:模块化开发如何重塑交互体验
设计模式
天南星8 小时前
23种设计模式-深度讲解-7. 装饰器模式 (Decorator)
后端·设计模式
hans汉斯9 小时前
【计算机科学与应用】基于多光谱成像与边缘计算的物流安全风险预警模式及系统实现
大数据·数据库·人工智能·设计模式·机器人·边缘计算·论文笔记
杯莫停丶9 小时前
设计模式之:适配器模式
设计模式·适配器模式
xiezhr10 小时前
见过哪些醍醐灌顶的Java代码:从"卧槽"到"原来如此"的顿悟
java·后端·设计模式
WaWaJie_Ngen10 小时前
【设计模式】适配器模式(Adapter)
设计模式·适配器模式
Mr_WangAndy21 小时前
C++设计模式_行为型模式_策略模式Strategy
c++·设计模式·策略模式·依赖倒置原则