第八天前端设计模式应用课程笔记| 青训营

71 阅读3分钟

设计模式概述:

前端设计模式是一套被广泛使用的解决前端开发中常见问题的设计解决方案。设计模式提供了一种可重用的、标准化的方法来解决特定问题,帮助开发人员编写更加可维护、可扩展和可重用的代码。

模式语言:城镇,建筑,建造

设计模式:可复用面向对象软件的基础

设计模式分类枚举:

创建型(如何创建一个对象),结构型(如何灵活的将对象组装成较大的结构),行为型(负责对象间的高校通信和职责划分)

浏览器中主要的设计模式:

模块模式:模块模式用于将相关的代码封装在一个独立的模块中,通过暴露公共接口来访问模块中的私有变量和方法。这种模式可以帮助组织代码,防止命名冲突,提供封装和抽象的能力。

单向数据流模式:单向数据流模式强调数据的单向流动,由父组件向子组件传递数据。这种模式可以降低程序的复杂度,增加代码的可预测性和可维护性。

组件模式:组件模式将 UI 拆分为独立的可重用组件,每个组件负责自己的状态管理和渲染。这种模式使得 UI 的开发和维护更加模块化和高效等

JavaScript 三大设计模式

原形模式(定义:复制已经有的对象创建新的对象,应用场景是JS对象创建的基本模式 )

代理模式(自定义控制对原对象的访问方式,允许在更新前后额外做一些预处理,应用场景:监控,代理工具,前端框架的实现)

迭代器模式(在JavaScript中,迭代器模式用于提供一种统一的方式来遍历集合对象的元素,而不需要暴露集合对象的内部结构。它将迭代过程封装在一个迭代器对象中,通过定义统一的接口来访问集合元素。)

前端框架中的设计模式

代理模式: 代理模式旨在提供一种间接访问对象的方式,通过创建一个代理对象来控制和管理对实际对象的访问权限。在前端框架中,代理模式经常被用于实现数据绑定、计算属性、虚拟化和懒加载等功能。例如,Vue框架的响应式系统就使用了代理模式来监测数据的访问和修改,以实现自动更新UI的功能。

组合模式: 组合模式旨在将对象组合成树形结构,以表示“部分-整体”的层次关系,并对单个对象和组合对象一视同仁。在前端框架中,组合模式经常被用于处理嵌套组件的层次化结构,以便统一处理组件的渲染、事件处理、状态管理等功能。例如,React框架中的组件树就是使用组合模式来构建和管理的,通过递归遍历组件树,可以方便地进行组件的渲染和更新。

这两种模式够提高代码的可组织性、可维护性和可扩展性,可以帮助我们实现对对象的控制和封装,从而实现更高层次的功能。