第八节课《前端设计模式应用》，本节课分为两小节，分别为前端设计模式概述和JavaScript和前端框架中的设计模式，课程链接如下：

1.前端设计模式概述 - 掘金

2.JavaScript 和前端框架中的设计模式 - 掘金

前端设计模式概述

什么是设计模式？

设计模式是一种解决软件设计问题的经验总结，它提供了一套被广泛接受的解决方案。设计模式可以帮助开发人员更好地组织和管理代码，提高代码的可读性、可维护性和可扩展性。当然，在实际开发中不用设计模式同样也是可以实现需求的，只是在业务逻辑比较复杂的情况下，代码可读性及可维护性变差。所以随着业务逻辑的扩展，了解常用设计模式解决问题是非常有必要的。

软件设计中常见问题的解决方案模型

•         历史经验总结；
•         与特定语言无关；

设计模式背景

• 模式语言：城镇、建筑、建造；
• 设计模式：可复用面向对象软件技术；

设计模式分类

23种设计模式

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

浏览器中的设计模式

• 单列模式：全局唯一方位对象；

  应用场景：缓存，全局状态管理等

• 发布订阅模式：一种订阅机制，可在被订阅对象发生变化时通知订阅者

  应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等，应用广泛。

JavaScript和前端框架中的设计模式

JavaScript中的三大设计模式

• 原型模式：

  • 定义：复制已有对象来创建新的对象；
  • 应用场景：JS中对象创建的基本模式；
  • 使用原型模式创建线上订阅中的用户；

• 代理模式：
  • 定义：可以自定义控制队员对象的访问方式，并且允许在更新前后做一些额外处理；
  • 应用场景：监控，代理工具，前端框架实现等；
  • 使用代理模式实现用户状态订阅；

• 迭代器模式：
  • 定义：在不暴露数据类型的情况下访问集合中的数据；
  • 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口；  
  • 用for of迭代所有组件；

前端框架中的设计模式：

• 代理模式
• 组合模式
• 组合模式：
  • 定义：多个对象组合使用，也可以单个对象独立使用；
  • 应用场景：DOM，前端组件，文件目录，部门；
  • React 的组件结构：