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

这是我参与 $\lceil$第四届青训营$\rfloor$ 笔记创作活动的第6天

课程的重点内容

1.什么是设计模式
2.浏览器中的设计模式
3.JavaScript中的设计模式
4.前端框架中的设计模式
5.总结

一、什么是设计模式

• 设计模式：软件中常见问题的解决方案模型（是历史经验的总结、与某种特定语言无关）
• 设计模式背景：

• 设计模式趋势：

国内

全球

• 设计模式的分类：（23种设计模式）
  • 创建型：如何创建一个对象
  • 结构性：如何灵活的将对象组装成较大的结构
  • 行为型：负责对象间的高效通信和职责划分

二、浏览器中的设计模式

• 单例模式

  • 定义：全局唯一访问对象
  • 应用场景：缓存，全局状态管理等

• 发布订阅模式

  • 定义：一种订阅机制，可以在订阅对象发生变化时，通知订阅者。
  • 应用场景：系统架构解耦；业务中的：邮件订阅，上线订阅

三、JavaScript中的设计模式

• 原型模式

  • 定义：复制已有对象来创建新的对象
  • 应用场景：JS中对象创建的基本模式

• 代理模式

  • 定义：可以控制对原对象的访问方式，并且允许在更新前后做一些额外处理
  • 应用场景：监控，代理工具，前端框架实现等

• 迭代器模式

  • 定义：在不暴露数据类型的情况下访问集合中的数据
  • 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口

四、前端框架中的设计模式

• 代理模式
  • 应用场景
    • 普通操作：更改DOM属性->视图更新
    • 框架操作：更改DOM属性->更新虚拟DOM->视图更新
• 组合模式
  • 定义：可多个对象组合使用，也可单个对象独立使用
  • 应用场景：DOM，前端组件，文件目录，部门

五、总结（设计模式不是银弹）

• 老师给的总结

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

• 个人感受：设计模式的可学习量较高，虽然我们在开发中大部分情况用不到设计模式的思想，但是它可以帮助我们学习和理解底层源码的实现，同时也能培养我们面对一些困难时的解决思维。这对于开发者来说是很重要的。

知识很多，时间有限。了解了本质才能更容易找到学习的方向。

下篇笔记：Web 标准与前端开发

基础不牢，地动山摇

TO BE CONTINUED