AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

前端学习笔记202306学习笔记第五十二天-设计模式1

2023-08-09 142
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端学习笔记202306学习笔记第五十二天-设计模式1

image.png

image.png

image.png

文章标签：
前端开发
设计模式
关键词：
前端设计模式
笔记设计模式
前端笔记
学习笔记设计模式
前端学习笔记
前端歌谣
目录
相关文章
凉凉心.
|
6月前
|
设计模式 消息中间件 安全
【JUC】（3）常见的设计模式概念分析与多把锁使用场景！！理解线程状态转换条件！带你深入JUC！！文章全程笔记干货！！
JUC专栏第三篇，带你继续深入JUC！ 本篇文章涵盖内容：保护性暂停、生产者与消费者、Park&unPark、线程转换条件、多把锁情况分析、可重入锁、顺序控制 笔记共享！！文章全程干货！
凉凉心.
413 1
划雨悦潭之赋
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式（Template Pattern）是一种行为型设计模式，父类定义固定流程和步骤顺序，子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景，如组装汽车、包装礼物等。举例来说，公司年会节目征集时，蜘蛛侠定义了歌曲的四个步骤：前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑，子类实现个性化行为，从而减少重复代码。模板模式还支持钩子方法，允许跳过某些步骤，增加灵活性。
划雨悦潭之赋
885 11
划雨悦潭之赋
|
设计模式 存储 供应链
前端必须掌握的设计模式——观察者模式
观察者模式（Observer Pattern）是一种行为型设计模式，实现了一种订阅机制。它包含两个角色：**观察者**（订阅消息、接收通知并执行操作）和**被观察者**（维护观察者列表、发送通知）。两者通过一对多的关系实现解耦，当被观察者状态改变时，会通知所有订阅的观察者。例如，商店老板作为被观察者，记录客户的需求并在商品到货时通知他们。前端应用中，如DOM事件注册、MutationObserver等也体现了这一模式。
划雨悦潭之赋
448 4
划雨悦潭之赋
|
设计模式 前端开发 调度
前端必须掌握的设计模式——工厂模式
工厂模式是一种创建型设计模式，通过工厂媒介提供统一接口来创建对象，客户端只需告知创建需求，具体逻辑由工厂处理。工厂模式分为简单工厂、标准工厂和抽象工厂，分别适用于不同场景下的对象创建需求。简单工厂利用静态方法创建对象，标准工厂通过具体工厂类减少耦合，抽象工厂则用于创建一系列相关或依赖对象的家族。
划雨悦潭之赋
453 6
前端必须掌握的设计模式——工厂模式
划雨悦潭之赋
|
设计模式 前端开发 JavaScript
前端必须掌握的设计模式——装饰器模式
装饰器模式是一种结构型设计模式，通过创建新类来包装原始对象，实现在不修改原有结构的前提下扩展新行为。其核心在于“组合”思想，使新功能可“即插即拔”。该模式具有解耦性、灵活性和动态性等特点，广泛应用于类的面向对象编程语言中，如JavaScript的注解和TypeScript的写法。示例中，通过装饰器模式为游戏角色动态添加装备，展示了其强大的扩展性和灵活性。
划雨悦潭之赋
406 16
划雨悦潭之赋
|
设计模式 消息中间件 供应链
前端必须掌握的设计模式——发布订阅模式
发布订阅模式（Publish-Subscribe Pattern）是一种设计模式，类似于观察者模式，但通过引入第三方中介实现发布者和订阅者的解耦。发布者不再直接通知订阅者，而是将消息发送给中介，由中介负责分发给订阅者。这种方式提高了异步支持和安全性，适合复杂、高并发场景，如消息队列和流处理系统。代码实现中，通过定义发布者、订阅者和中介接口，确保消息的正确传递。此模式在前端开发中广泛应用，例如Vue的数据双向绑定。
划雨悦潭之赋
2085 5
划雨悦潭之赋
|
设计模式 存储 缓存
前端必须掌握的设计模式——策略模式
策略模式（Strategy Pattern）是一种行为型设计模式，旨在将多分支复杂逻辑解耦。每个分支类只关心自身实现，无需处理策略切换。它避免了大量if-else或switch-case代码，符合开闭原则。常见应用场景包括表单验证、风格切换和缓存调度等。通过定义接口和上下文类，策略模式实现了灵活的逻辑分离与扩展。例如，在国际化需求中，可根据语言切换不同的词条包，使代码更加简洁优雅。总结来说，策略模式简化了多条件判断，提升了代码的可维护性和扩展性。
划雨悦潭之赋
564 3
划雨悦潭之赋
|
设计模式 存储 前端开发
前端必须掌握的设计模式——单例模式
单例模式是一种简单的创建型设计模式，确保一个类只有一个实例，并提供一个全局访问点。适用于窗口对象、登录弹窗等场景，优点包括易于维护、访问和低消耗，但也有安全隐患、可能形成巨石对象及扩展性差等缺点。文中展示了JavaScript和TypeScript的实现方法。
划雨悦潭之赋
621 13
划雨悦潭之赋
|
设计模式 JSON 前端开发
前端必须掌握的设计模式——适配器模式
适配器模式是一种结构型设计模式，用于使接口不兼容的对象能够相互合作。通过在客户端和系统之间引入一个“中间层”适配器，将不同类型的输入数据转换为系统能处理的标准格式，减轻系统的负担，提高扩展性和可维护性。例如，MacBook的扩展坞将多种接口（如HDMI、USB）转换为Type-C接口，实现多接口兼容。
划雨悦潭之赋
327 2
划雨悦潭之赋
|
设计模式 前端开发 数据安全/隐私保护
前端必须掌握的设计模式——代理模式
代理模式（Proxy Pattern）是一种结构型设计模式，通过引入“替身”对象来间接访问真实对象，从而解耦并提升性能和安全性。例如，知名艺人复出后，经纪人作为代理筛选商单，确保只处理符合团队利益的请求。代码实现中，定义接口`IService`，艺人和经纪人都实现该接口，经纪人在访问时进行过滤和转发。代理模式常用于权限控制、性能优化等场景，如前端中的Tree-shaking和ES6的Proxy构造方法。
划雨悦潭之赋
390 0
前端必须掌握的设计模式——代理模式

热门文章

最新文章

  • 1
    乐在其中设计模式(C#) - 观察者模式(Observer Pattern)
  • 2
    spring中的设计模式（二）
  • 3
    JAVA之旅（二十六）——装饰设计模式，继承和装饰的区别，LineNumberReader，自定义LineNumberReader，字节流读取操作，I/O复制图片
  • 4
    【HeadFirst 设计模式学习笔记】14 责任链模式拾零
  • 5
    云计算设计模式（十）——守门员模式
  • 6
    乐在其中设计模式(C#) - 中介者模式(Mediator Pattern)
  • 7
    Go语言实现23种设计模式
  • 8
    23种设计模式之解释器模式（Interpreter）
  • 9
    极速理解设计模式系列：24.解释器模式(Interpreter Pattern)
  • 10
    C#设计模式(10)——组合模式（Composite Pattern）
  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
    1020
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    432
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    341
  • 4
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    324
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    438
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    618
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    859
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    230
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    705
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    398

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    开通oss服务