JavaScript设计模式-委托模式(5)

简介: JavaScript设计模式-委托模式(5)

委托设计模式是指当多个对象需要处理同一个事情时,可以将这些事情交由另一个对象统一处理,最为常见的就是事件委托

事件委托


事件委托是把一个元素的响应事件交给另一个元素进行触发

事件委托实现


页面结构

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

我们获取到所有的li,在通过循环给每个li使用addEventListener绑定事件

// 获取所有的li元素
        const lis = document.querySelectorAll('li');
        // 给所有的li元素添加事件,由于通过原生js获取元素方法获取当的是一个伪元素,所以需要使用数组方法转换为真正的数组
      Array.from(lis).map((res, index) => {
            //给li元素添加上点击事件,使用addEventListener可以杜绝变量污染的问题
            res.addEventListener('click', function () {
                console.log(`当前是第${index}个元素触发`);
            }, false)
        });

我们这里的列表项只有十个,不算多,如果我们有很多的列表项,不仅循环消耗时间变长了,同时也给每个列表项绑定上了事件,造成了性能的损失以及内存的占用,这里对浏览器来说,这点性能和内存的占用并不会引起什么问题,如果通过js的原生方法appendChild往当前ul元素里面添加列表项,后添加的列表项则没有响应事件,因为响应事件是从页面初始化的时候循环添加的,后续元素发生任何变化都不会触发页面初始化

这里我们可以采用事件委托去解决这个问题,把响应事件委托给列表项的父盒子进行触发响应

// 获取列表项父元素
        const ul = document.querySelector('ul');
        // 添加点击响应事件,event是事件对象
        ul.addEventListener('click', function (event) {
            //此处是兼容写法
            const e = event || window.event,
            target =e.target||e.srcElement;
            // 判断是否为列表项触发
            if(target.nodeName.toLowerCase()=='li'){
                console.log(`当前触发的是第${target.innerHTML}个元素`); 
            }
//我们需要把这里的改为true开启事件冒泡,false是只允许事件捕获,true是只允许冒泡
        }, true)

事件委托机制是通过事件冒泡进行实现的,当我们点击列表项的时候,事件就会冒泡,冒泡到父元素上面,父元素上面有对应的响应事件就会触发对应的响应事件,响应事件中我们传递了事件对象evenet,我们通过evenet的target属性进行判断是否是当前列表项触发的响应事件,如果是列表项就执行后续操作,就算我们后期往列表盒子中追加列表项,也是不影响触发事件

委托设计模式能够将一个大型任务细分化,然后进行统一管理子任务,提高了性能减少了内存消耗,但是委托设计模式需要根据任务的复杂程度做出对应改变,在一些情况下有可能会出现任务多重委托的操作,容易出现问题

坚持努力,无惧未来!

相关文章
|
2月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
119 11
|
1天前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
56 44
|
3月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
14天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
75 40
|
15天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
46 19
|
13天前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
47 12
|
30天前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
81 33
|
15天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
34 15
|
3月前
|
设计模式 开发者 Python
Python编程中的设计模式:工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例,我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者,都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
|
2月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。

热门文章

最新文章