前端框架中的设计模式 ｜ 豆包MarsCode AI 刷题

设计模式分类

23种设计模式

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

浏览器中的设计模式

单例模式

定义
确保一个类只有一个实例，并提供一个全局访问点。

应用场景

• 浏览器中的应用：

  • window对象：全局唯一实例，表示浏览器窗口。
  • 事件管理器：如浏览器的事件循环。
  • 浏览器的历史记录管理：如history对象。

发布订阅模式

定义
一种消息传递机制，允许多个订阅者监听一个发布者的事件，当事件触发时，通知所有订阅者。

应用场景

• 浏览器中的应用：

  • DOM事件机制：浏览器通过事件目标的addEventListener和dispatchEvent实现发布订阅。
  • WebSocket通信：在实时通信中，服务器作为发布者，客户端作为订阅者。
  • 浏览器插件：插件可以监听浏览器状态（如网络变化、用户动作）。

JavaScript中的设计模式

原型模式

定义
通过创建对象的原型来共享方法和属性，避免重复定义。

应用场景

• JavaScript的原型链机制：

  • Object.prototype上的方法（如toString、hasOwnProperty）为所有对象共享。

• 创建复杂对象：

  • 使用Object.create基于现有对象创建新对象。

• 性能优化：减少内存占用，提升对象创建效率。

代理模式

定义
为其他对象提供代理，以控制对该对象的访问。

应用场景

• 虚拟代理：

  • 延迟加载：如图片懒加载，先显示占位符，实际加载图片时再替换。

• 防护代理：

  • 权限管理：控制对某些对象的访问（如API请求的验证）。

• ES6的Proxy对象：

  • 动态拦截操作：如对象属性访问、函数调用、修改操作。

迭代器模式

定义
提供一种方法顺序访问集合对象的元素，而不暴露其内部表示。

应用场景

• JavaScript中的应用：

  • for...of循环：迭代数组、Map、Set等可迭代对象。
  • 生成器 ：通过yield生成序列化数据流。

• 前端应用：

  • 解析复杂结构：如处理DOM树、遍历JSON对象。

前端框架中的设计模式

代理模式

定义
为其他对象提供代理，以控制对该对象的访问。 应用场景

• 前端框架中的应用：

  • Vue的响应式系统：

    • Vue2通过Object.defineProperty，Vue3通过Proxy实现数据劫持和响应式更新。

  • 请求拦截：如Axios的请求和响应拦截器。

组合模式

定义
将对象组合成树形结构，以表示“部分-整体”的层次结构，使得客户端可以一致地处理单个对象和组合对象。

应用场景

• React中的组件系统：

  • React组件是一个典型的组合模式，通过嵌套子组件形成树状UI结构。

• DOM树的操作：

  • 浏览器中的DOM节点是树形结构，可以通过递归操作实现统一管理。

• 复杂表单设计：

  • 表单中字段组和单个字段的组合。