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

什么是设计模式？

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

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

---

设计模式的背景

1. 模式语言：城镇、建筑、建造（A Pattern Language: Towns, Buildings, Construction） 1977（第一次有涉及模式这个词）
2. 设计模式：可复用面向对象软件的基础（Design Pattern: Elements of Reusable Object-Oriented Software） 1994（软件领域，这里的面向对象是比较传统的面向对象，像 Java 语言、C++等，JavaScript 也有对象，但它不是传统面向对象语言）

---

设计模式分类

24 种设计模式

1. 创建型 —— 如何创建一个对象
           • 简单工厂模式
           • 工厂方法模式
           • 抽象工厂模式
           • 建造者模式
           • 原型模式
           • 单例模式
2. 结构型 —— 如何灵活的将对象组装成较大的结构
           • 适配器模式
           • 桥接模式
           • 组合模式
           • 装饰模式
           • 外观模式
           • 享元模式
           • 代理模式
3. 行为型 —— 负责对象间的高效通信和职责划分
           • 职责链模式
           • 命令模式
           • 解释器模式
           • 迭代器模式
           • 中介者模式
           • 备忘录模式
           • 观察者模式
           • 状态模式
           • 策略模式
           • 模板方法模式
           • 访问者模式

---

浏览器种的设计模式

主要介绍以下两种设计模式：
        1. 单例模式
                定义：全局唯一访问对象（window 对象）。
                应用场景：缓存，全局状态管理等。
        2. 发布订阅模式（观察者模式）
                定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
                应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅、上线订阅等等，应用广泛。 button 为被订阅对象，函数 doSomething1 为订阅者（面向对象中是不能把函数作为参数传入另一个函数中的，但在现代语言中多编程范式是很常见了。）。

---

JavaScript 中的设计模式

1. 原型模式
           • 定义：复制已有对象来创建新的对象。
           • 应用场景：JS 对象创建的基本模式。
   原型链实现了 JavaScript 中的继承和一些对象的定义。
2. 代理模式
           • 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
           • 应用场景：监视、代理工具（业务场景）、前端框架实现等等。
   
3. 迭代器模式
           • 定义：在暴露数据类型的情况下访问集合（数组、 map 、 set 、 自定义的数据结构（树、图等）、……）中的数据。
           • 应用场景：数据结构中有多种数据类型（列表、树等），提供通用操作接口。 可以给任意一个对象添加一个特殊的方法（内置的方法：[Symbol.iterator]），它可以让这个组件变成可迭代的。
   

---

前端框架中的设计模式

1. 代理模式（跟 JavaScript 中可以提供 API 实现的代理模式有些不同）
   Vue 组件实现计数器：
   
2. 组合模式（跟迭代器模式有些类似）
           • 定义：可多个对象组合使用，可也单个对象独立使用。
           • 应用场景：DOM ，前端组件，文件目录，部门。
   React 的组件结构：

---

总结

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