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

这是我参与「第四届青训营 」笔记创作活动的第4天

设计模式的定义

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

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

学设计模式的意义

在一些复杂的特定的场景下，如果开发用if else一把梭是什么麻烦的事情，了解设计模式，总结前人解决问题的经验十分有必要，学会设计模式开发会事半功倍。在Vue中就有用到观察者模式、发布订阅模式、策略模式、适配器模式、发布订阅模式、工厂模式、组合模式、代理模式、门面模式等等。学会设计模式，也是给架构之路打下一部分的基础。本文将介绍前端主要用到的几个设计模式，重点介绍发布订阅模式。

设计模式的分类

一共有23种设计模式

创建模式（5种）

• 工厂方法模式
• 抽象工厂模式
• 单例模式
• 建造者模式
• 原型模式

结构模式（7种）

• 适配器模式
• 装饰者模式
• 代理模式
• 外观模式
• 桥接模式
• 组合模式
• 享元模式

关系模式（11种）

• 策略模式
• 模板方法模式
• 观察者模式
• 迭代子模式
• 责任链模式
• 备忘录模式
• 命令模式
• 状态模式
• 访问者模式
• 中介者模式
• 解释器模式

三大类型

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

学习各种设计模式可以观看以下链接的文章 [23 种设计模式详解（全23种）_鬼灭之刃的博客-CSDN博客_设计模式](url)

浏览器中的设计模式

• 单例模式
• 发布订阅模式

单例模式

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

这里的全局唯一访问对象可以理解为js中的window我们能够使用其身上的所有属性与方法，vue中的对象实例也算是一个全局唯一访问对象，在我们写vue的使用我们不仅要使用vue对象实例上的方法，还要使用其做数据代理等。

发布订阅模式

• 定义：一种订阅机制，可以被订阅对象发生变化时通知订阅者
• 从系统结构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛

代码分析（以下代码来自青训营课堂）

代码中用了subscribe()和notify()两个内置的方法，实现了发布订阅，subscribe()让对象订阅相关的信息，当对象订阅的相关信息发生改变时就会通过notify()通知到对象

发布订阅模式在各大框架中广泛使用，像在vue中就有通过发布订阅模式实现组件通信，所以学会发布订阅模式很有用能够更好的理解框架的底层实现原理

Javascript中的设计模式

• 原型模式
• 代理模式
• 迭代器模式

原型模式

• 定义：复制已有对象创建一个新对象 -应用场景： js中对象的基本模式

代理模式

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

在vue中就有通过Object.defineProperty(obj, prop, descriptor)做到了数据代理，从而做到了数据驱动达到响应式。

迭代器模式

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

前端框架中的设计模式

• 代理模式（Vue）
• 组合模式（React）

代理模式

前端框架中对DOM操作的代理

组合模式

-定义：可多个对象组合使用，也可以单个对象独立使用 -应用场景：DOM，前端组件，文件目录，部门

总结

• 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景使用十分困难
• 现代编程语言的多编程范式给设计模式带来的更多可能性
• 可以通过真正优秀的开源项目学习设计模式并不断实践
• 总的来说，设计模式不仅要知道更重要的时动手实践，应用实际。