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"));

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521599.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# 使用共享文件生成项目

项目文件中添加共享文件 <ItemGroup><Compile Include"..\Shared\Interfaces\Services\ITextService.cs" Link"Interfaces\Services\ITextService.cs" /><Compile Include"..\Shared\Services\TextService.cs" Link"Service…

C++高频面试知识总结 part2

C高频面试 1.sizeof是什么&#xff1f;sizeof一个class大小怎么确定&#xff1f;是在编译期还是在运行期确定?2.函数重载的机制&#xff0c;重载是在编译期还是在运行期确定&#xff0c;重载有额外开销吗3.函数重写在编译还是运行时确定&#xff1f;4.如何找到虚函数表&#x…

【数据结构与算法】力扣 24. 两两交换链表中的节点

题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a; head [1,2,3,4] 输出&#…

go | gin 重定向路由重定向

web 重定向 重定向有一点要注意&#xff0c;重定向是在客户端那边执行的&#xff0c;一次服务器只能响应一次请求。但是要注意路由重定向 路由重定向是在服务器内部完成重定向资源请求 package mainimport ("github.com/gin-gonic/gin""fmt" )/* func main…

C语言自定义类型变量——枚举(enum)

一.枚举的定义和声明 字面意思&#xff0c;枚举就是一一列举&#xff0c;把可能的取值一一列举&#xff0c;在我们现实生活中有许多可以列举的事物&#xff0c;例如&#xff1a;一周七天&#xff0c;一年四季&#xff0c;性别&#xff0c;月份&#xff0c;三原色等等。当我们需…

【SpringCloud】Nacos 注册中心

目 录 一.认识和安装 Nacos1.Windows安装1. 下载安装包2. 解压3. 端口配置4. 启动5. 访问 2.Linux安装1. 安装JDK2. 上传安装包3. 解压4. 端口配置5. 启动 二.服务注册到 nacos1. 引入依赖2. 配置 nacos 地址3. 重启 三.服务分级存储模型1. 给 user-service 配置集群2. 同集群优…

Spring Boot-01-通过一个项目快速入门

官方参考文档&#xff1a;Spring Boot Reference Documentation 0. 概述 Spring的缺点&#xff1a; 1. 配置繁琐&#xff1a;虽然Spring的组件代码是轻量级&#xff0c;但它的配置却是重量级的。 2. 依赖繁琐&#xff1a;项目的依赖管理也是一件耗时耗力的事情。分析要导入哪…

在单交换机局域网中,不同网段的主机通信探秘

在理解局域网中不同网段主机之间的通信之前&#xff0c;我们首先要明白网络的基本组成和工作原理。局域网&#xff08;LAN&#xff09;是一个封闭的网络环境&#xff0c;通常由交换机&#xff08;Switch&#xff09;作为核心设备连接网络中的各个主机。当我们谈论不同网段的主机…

C语言 | Leetcode C语言题解之第13题罗马数字转整数

题解&#xff1a; 题解&#xff1a; int romanToInt(char* s) {int symbolValues[26];symbolValues[I - A] 1;symbolValues[V - A] 5;symbolValues[X - A] 10;symbolValues[L - A] 50;symbolValues[C - A] 100;symbolValues[D - A] 500;symbolValues[M - A] 1000;int a…

天龙八部_暗黑机制_人面桃花_单机架设搭建

一. 搭建成功视频演示 天龙八部_暗黑机制_人面桃花_单机架设搭建 二. 一些文件截图 完整教程和搭建文件获取: https://githubs.xyz/y24.html 三. 搭建步骤 安装虚拟机虚拟机打开一键端&#xff0c;然后登录root&#xff0c;密码&#xff1a;123456启动./run 脚本 &#xff0…

【201】Java8读取JSON树形结构并插入到MySQL数据库表中

我写了一个 maven 项目的 Demo&#xff0c;用来演示 JAVA8 如何读取 JSON 文件树形结构&#xff0c;并将这种树形结构保存到 MySQL 中。 json文件 city.json {"name": "山东省","sub": [{"name": "青岛市","sub"…

Java | Leetcode Java题解之第14题最长公共前缀

题目&#xff1a; 题解&#xff1a; class Solution {public String longestCommonPrefix(String[] strs) {if (strs null || strs.length 0) {return "";}int minLength Integer.MAX_VALUE;for (String str : strs) {minLength Math.min(minLength, str.length…

汇川PLC学习Day4:电机参数和气缸控制参数

汇川PLC学习Day4&#xff1a;伺服电机参数和气缸控制参数 一、伺服电机参数二、气缸参数1. 输入IO映射&#xff08;1&#xff09;输入IO映射&#xff08;2&#xff09; 输入IO触摸屏标签显示映射 2. 输出IO映射&#xff08;1&#xff09;输出IO映射&#xff08;2&#xff09; …

摄影杂记一

摄影小白&#xff0c;最近买了一台微单&#xff0c;型号是佳能R10&#xff0c;加上18-150套机镜头和佳能RF 50 F1.8定焦镜头。开始学习摄影。 PS&#xff1a;摄影穷三代&#xff0c;单反毁一生。嘿嘿。 一、分镜头拍摄四步提升法 B站&#xff1a;六斤 拍视频三件事&#xff1…

4.2.k8s的pod-标签管理、镜像拉取策略、容器重启策略、资源限制、优雅终止

一、标签管理 1.标签在k8s中极其重要&#xff0c;大多数资源的相互关联就需要使用标签&#xff1b;也就是说&#xff0c;资源的相互关联大多数时候&#xff0c;是使用标签进行关联的&#xff1b; 2.其他作用&#xff0c;在k8s集群中&#xff0c;node节点的一些操作比如污点及污…

【Java设计模式】创建型——工厂方法模式

目录 背景/问题解决方案思路方案 图解简单工厂模式/静态工厂模式工厂方法模式 代码示例&#xff1a;图形工厂意图主要解决何时使用如何解决关键代码 工厂模式的优点工厂模式的缺点使用场景注意事项 背景/问题 在软件设计中&#xff0c;我们经常遇到需要创建不同类型对象的情况…

NzN的数据结构--栈的实现

在前面我们已经学习了哪些线性数据结构呢&#xff1f;大家一起来回顾一下&#xff1a;C语言学过的数组&#xff0c;数据结构中的线性表和顺序表和链表。那我们今天再来介绍数据结构里的两个线性结构--栈和队列。 目录 一、栈的概念及结构 二、用数组实现栈 1. 栈的初始化和…

linux--进程创建

执行了3次ps -f ,ps -f的父进程的ID(PPID)都是一样的,即bash. 实际上Linux上这个bash就是不断的复制自身,然后把复制出来的用exec替换成想要执行的程序(比如ps); 运行ps,发现ps是bash的一个子进程;原因就是bash把自己复制一份,然后替换成ps; 替换,这里就体现了写时拷贝的意义,…

ETL中如何自定义规则

一、ETL中的规则 在使用规则之前我们先来了解一下什么是规则&#xff0c;ETL中规则在很多组件中都能看见&#xff0c;可以理解为按照事前约定好的逻辑去执行&#xff0c;规则可以使得数据更加的规范统一&#xff0c;同时也不需要去纵向的修改底层代码&#xff0c;只需要动态编…

自动驾驶汽车关键技术_感知

自动驾驶汽车关键技术|感知 附赠自动驾驶学习资料和量产经验&#xff1a;链接 两套标准 分别由美国交通部下属的国家高速路安全管理局(NationalHighwayTraffic Safety Administration &#xff0c;NHSTA) 和国际汽车工程师协会&#xff08;Societyof Automotive Engineers&am…