前端实现23种设计模式

简介: 在前端开发中,设计模式是一种被广泛应用的解决方案,它们可以帮助我们解决各种常见的问题,并提供可维护和可扩展的代码架构。本文将介绍前端开发中的23种设计模式,从创建型、结构型和行为型三个分类角度,对每个模式进行详细的解析和实际应用示例,帮助读者更好地理解和运用这些模式。

引言

在前端开发中,设计模式是一种被广泛应用的解决方案,它们可以帮助我们解决各种常见的问题,并提供可维护和可扩展的代码架构。本文将介绍前端开发中的23种设计模式,从创建型、结构型和行为型三个分类角度,对每个模式进行详细的解析和实际应用示例,帮助读者更好地理解和运用这些模式。

设计模式分类:

设计模式可以按照不同的维度进行分类,常见的分类包括创建型模式、结构型模式和行为型模式。以下是一些常用的设计模式及其链接:

创建型模式

创建型模式(Creational Pattern)对类的实例化过程进行了抽象,能够将模块中对象的创建和对象的使用分离。为了使结构更加清晰,外界对于这些对象只需要知道它们共同的接口,而不清楚其具体的实现细节,使整个系统的设计更加符合单一职责原则。

  • 简单工厂(Simple Factory):由一个工厂类根据传入的参数决定创建哪一种产品类的实例。
  • 工厂方法(Factory):通过工厂方法创建对象,而不是直接使用 new 操作符。
  • 抽象工厂(Abstract Factory):提供一个创建一系列相关对象的接口,而无需指定具体类。
  • 原型模式(Prototype):通过复制现有对象来创建新对象,而不是通过实例化。
  • 建造者模式(Builder):将复杂对象的构建过程与其表示分离,使得同样的构建过程可以创建不同的表示。
  • 单例模式(Singleton):确保一个类只有一个实例,并提供全局访问点。

结构型模式

结构型模式(Structural Pattern)描述如何将类或者对 象结合在一起形成更大的结构,就像搭积木,可以通过 简单积木的组合形成复杂的、功能更为强大的结构。结构型模式可以分为类结构型模式和对象结构型模式:

  • 适配器模式(Adapter):将一个类的接口转换为客户端所期望的另一个接口。
  • 桥接模式(Bridge):将抽象部分与它的实现部分分离,使它们都可以独立地变化。
  • 组合模式(Composite):将对象组合成树形结构,以表示"部分-整体"的层次结构。
  • 装饰器模式(Decorator):动态地给对象添加额外的职责。
  • 外观模式(Facade):为子系统中的一组接口提供一个统一的接口。
  • 享元模式(Flyweight):通过共享对象来有效地支持大量细粒度的对象,以减少内存消耗和提高性能。
  • 代理模式(Proxy):为其他对象提供一种代理以控制对这个对象的访问。

行为型模式

行为型模式(Behavioral Pattern)是对在不同的对象之间划分责任和算法的抽象化。行为型模式不仅仅关注类和对象的结构,而且重点关注它们之间的相互作用。通过行为型模式,可以更加清晰地划分类与对象的职责,并研究系统在运行时实例对象之间的交互。

  • 责任链模式(Chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。
  • 命令模式(Command):将一个请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化。
  • 迭代器模式(Iterator):提供一种方法顺序访问一个聚合对象中的各个元素,而不暴露该对象的内部表示。
  • 中介者模式(Mediator):用一个中介对象来封装一系列的对象交互,使对象间的耦合松散。
  • 备忘录模式(Memento):在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。
  • 观察者模式(Observer):定义对象间的一种一对多的依赖关系,使得当一个对象状态改变时,所有依赖它的对象都会得到通知并自动更新。
  • 状态模式(State):允许对象在其内部状态改变时改变它的行为。
  • 策略模式(Strategy):定义一系列算法,将每个算法都封装起来,并使它们可以互换。
  • 模版方法模式(Template Method):定义一个操作中的算法框架,而将一些步骤延迟到子类中实现。
  • 访问者模式(Visitor):表示一个作用于某对象结构中的各元素的操作,使得可以在不改变各元素的类的前提下定义作用于这些元素的新操作。

结论:

设计模式是前端开发中的重要工具,它们提供了解决问题的经验和最佳实践。了解和应用这些设计模式可以提高代码的可维护性、可扩展性和可重用性。通过本文的介绍,你可以掌握前端开发中的23种设计模式,并在实际项目中灵活运用它们,提升你的开发技能和项目质量。其中包括创建型设计模式(单例模式、工厂模式、抽象工厂模式、建造者模式、原型模式)、结构型设计模式(适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式)、行为型设计模式(观察者模式、订阅-发布模式、策略模式、命令模式、迭代器模式、模版方法模式)和其他设计模式(状态模式、职责链模式、中介者模式、备忘录模式、访问者模式、享元模式、模块模式、混合模式、委托模式)。希望本文对你有所帮助,让你在前端开发的道路上越走越远。

关于作者

微信公众号: 《前端小溪呀》

个人网站: https://xiaoxi.mailjob.net

Github: https://github.com/miaomiaozuo

公众号日常更新:技术干货、工作方案实践、学习资料分享(电子书、视频)、经典面试题解析。关注微信公众号,回复"加群",拉您进入技术交流群。

目录
打赏
0
1
3
0
9
分享
相关文章
探索现代前端开发中的设计模式
在现代前端开发中,设计模式是一种重要的工具,它可以帮助开发者提高代码的可维护性、可扩展性和可重用性。本文将介绍几种常见的设计模式,并探讨它们在前端开发中的应用。
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
88 0
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
150 11
前端必须掌握的设计模式——观察者模式
观察者模式(Observer Pattern)是一种行为型设计模式,实现了一种订阅机制。它包含两个角色:**观察者**(订阅消息、接收通知并执行操作)和**被观察者**(维护观察者列表、发送通知)。两者通过一对多的关系实现解耦,当被观察者状态改变时,会通知所有订阅的观察者。例如,商店老板作为被观察者,记录客户的需求并在商品到货时通知他们。前端应用中,如DOM事件注册、MutationObserver等也体现了这一模式。
前端必须掌握的设计模式——工厂模式
工厂模式是一种创建型设计模式,通过工厂媒介提供统一接口来创建对象,客户端只需告知创建需求,具体逻辑由工厂处理。工厂模式分为简单工厂、标准工厂和抽象工厂,分别适用于不同场景下的对象创建需求。简单工厂利用静态方法创建对象,标准工厂通过具体工厂类减少耦合,抽象工厂则用于创建一系列相关或依赖对象的家族。
前端必须掌握的设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,旨在将多分支复杂逻辑解耦。每个分支类只关心自身实现,无需处理策略切换。它避免了大量if-else或switch-case代码,符合开闭原则。常见应用场景包括表单验证、风格切换和缓存调度等。通过定义接口和上下文类,策略模式实现了灵活的逻辑分离与扩展。例如,在国际化需求中,可根据语言切换不同的词条包,使代码更加简洁优雅。总结来说,策略模式简化了多条件判断,提升了代码的可维护性和扩展性。
前端必须掌握的设计模式——发布订阅模式
发布订阅模式(Publish-Subscribe Pattern)是一种设计模式,类似于观察者模式,但通过引入第三方中介实现发布者和订阅者的解耦。发布者不再直接通知订阅者,而是将消息发送给中介,由中介负责分发给订阅者。这种方式提高了异步支持和安全性,适合复杂、高并发场景,如消息队列和流处理系统。代码实现中,通过定义发布者、订阅者和中介接口,确保消息的正确传递。此模式在前端开发中广泛应用,例如Vue的数据双向绑定。
前端必须掌握的设计模式——装饰器模式
装饰器模式是一种结构型设计模式,通过创建新类来包装原始对象,实现在不修改原有结构的前提下扩展新行为。其核心在于“组合”思想,使新功能可“即插即拔”。该模式具有解耦性、灵活性和动态性等特点,广泛应用于类的面向对象编程语言中,如JavaScript的注解和TypeScript的写法。示例中,通过装饰器模式为游戏角色动态添加装备,展示了其强大的扩展性和灵活性。
前端必须掌握的设计模式——单例模式
单例模式是一种简单的创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点。适用于窗口对象、登录弹窗等场景,优点包括易于维护、访问和低消耗,但也有安全隐患、可能形成巨石对象及扩展性差等缺点。文中展示了JavaScript和TypeScript的实现方法。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    23
  • 3
    详解智能编码在前端研发的创新应用
    16
  • 4
    巧用通义灵码,提升前端研发效率
    14
  • 5
    智能编码在前端研发的创新应用
    12
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    10
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    24
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    69
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    12