前端设计模式应用|青训营

62 阅读4分钟

什么是设计模式:软件设计中常见问题的解决方案模型

前端设计模式是一套在前端开发中用来解决特定问题的经验总结和最佳实践。设计模式的出现是为了提高代码的可维护性、可扩展性和重用性,以及降低软件开发过程中的复杂度。设计模式的背景可以从模式语言和软件开发的进化过程两个方面来说明。

设计模式可以分为三大类别:创建型模式、结构型模式和行为型模式。

创建型模式: 创建型模式关注对象的创建过程,目的是将对象的实例化与使用代码解耦,使得系统更加灵活和可扩展。常见的创建型模式有:

单例模式:确保一个类只有一个实例,并提供一个全局访问点。 工厂模式:通过工厂类封装对象的创建过程,实现对象的统一创建和管理。 抽象工厂模式:提供一个接口,用于创建相关或依赖对象的家族,而不需要指定具体的类。 建造者模式:将复杂对象的构建过程与其表示分离,可以一步一步地构造一个复杂对象。 原型模式:通过复制现有对象的原型来创建新的对象,避免了昂贵的对象创建过程。

结构型模式: 结构型模式关注对象之间的组合和关联关系,以及如何将类或对象组合成更大的结构。它可以帮助实现不同对象之间的松耦合,使系统更灵活。常见的结构型模式有:

适配器模式:将一个类的接口转换为客户端所期望的另一个接口。 桥接模式:将抽象部分与其实现分离,使它们可以独立地变化。 装饰器模式:在不改变原始对象的基础上,动态地扩展其功能。 组合模式:将对象组合成树状结构,以表示“整体-部分”关系,使客户端统一对待单个对象和组合对象。 外观模式:提供了一个统一的接口,用于访问子系统中的一组接口。 享元模式:共享细粒度的对象,以减少内存使用和提高性能。

行为型模式: 行为型模式关注对象之间的协作和职责分配,描述了对象之间如何通信、如何相互协作以及如何分配职责。它可以帮助开发者设计出灵活、可扩展和易于维护的系统。常见的行为型模式有:

观察者模式:定义了一种一对多的依赖关系,让多个观察者对象同时监听一个主题对象。 策略模式:定义一系列算法,封装每个算法,并使它们可以互换使用。 命令模式:将请求封装成一个对象,使得可以用不同的请求对客户进行参数化。 迭代器模式:提供一种顺序访问聚合对象中各个元素的方法,而不暴露其内部表示。 状态模式:允许对象在内部状态发生改变时改变其行为。 责任链模式:将请求的发送者和接收者解耦,通过一系列的处理对象来处理请求。

JS中的设计者模式

原型模式:定义:复制已有对象来创建新的对象。 应用场景:JS中对象创建的基本场景。

代理模式:定义:可自定义控制对原对象的访问方式,并且更新前后做一些额外处理。 应用场景:监控、代理工具,前端框架实现等等。

迭代器模式:定义:在不暴露数据类型的情况下访问集合中的数据。 应用场景:数据结构中有多种数据类型,列表、树等,提供通用操作接口。

前端框架中的设计模式

前端框架中也有代理模式,相比较起来有额外的组合模式

框架中的代理模式:

image.png 组合模式:定义:可多个对象组合使用,也可单个对象独立使用。 应用场景:DOM,前端组件,文件目录,部门。

总结:设计模式不是银弹。 总结出抽象的模式相对比较简单,但是想要将抽象的模式套用到场景中却非常困难。 现代编程语言的多编程范式带来的更多可能性。 真正优秀的开源项目学习设计模式并不断实践