这是我参与「第四届青训营 」笔记创作活动的第1天
本人小白一个，有些个人见解，还望谅解指正。
// 前端设计模式应用或许应该叫“前端方面的设计模式的应用”。“设计模式”是一个单拎出来的词汇
什么是设计模式？
软件设计中常见问题的解决方案模型。
// 解决方案模型？？我觉得是和适用于不同类型数学题的各种套路一个意思
// 为什么说是“软件设计”不是讲的前端设计吗，这就要讲到设计模式的历史了
设计模式的历史
graph TD
建筑领域设计模式思想 --> 软件开发设计模式
有两个歪果人利用另一个歪果人在建筑领域的思想开发了“设计模式”，并把它应用于Smalltalk中的图形用户接口的生成中。新的两个歪果人出现了！他们不知道有没有关系，同时间段，一个致力于将这种思想改写为适用于软件开发，一个致力将这种思想改写为适用于C++的开发。最后，那个致力于软件开发的和不知哪里出现的新的三个歪果人合作出版了一本书，这本书收录了23个设计模式。
// Smalltalk是什么：百度百科 baike.baidu.com/item/Smallt…
设计模式（设计模式概念）一般指软件设计模式。
软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。
附百度百科 : baike.baidu.com/item/%E8%BD…
// 23种设计模式老多了，这23种又概括为三类
设计模式分类
- 创建型——创建一个对象
- 结构型——灵活地将对象组装成较大的结构
- 行为型——负责对象间的高效通信和职责划分
浏览器中的设计模式
· 单例模式
- 定义：创建一个对象，使得整个系统中，这个对象有且仅有一个。
- 应用场景：缓存、全局状态管理等。
eg：用单例模式实现请求缓存
· 发布订阅模式
- 定义：一种订阅机制。可以在被订阅对象发生变化时通知订阅者。
- 应用场景：从系统架构的解耦，到业务实现阅、上线订阅等，应用广泛。
eg：用单例模式实现请求缓存
Javascript中的设计模式
· 原型模式
- 定义：利用一个对象本体（称为原型），克隆出另一个。
- 应用场景：JS中对象创建的基本模式。
eg：用原型模式创建上线订阅中的用户
· 代理模式
- 定义：为了控制对象的访问，加一个代理人。
- 应用场景：监控、代理工具、前端框架实现等。
eg：用代理模式实现用户状态订阅
· 迭代器模式
- 定义：遍历类。
- 应用场景：为数据结构中的多种数据类型提供通用的操作接口。
eg：用for of迭代所有组件
前端框架中的设计模式
·代理模式
- 定义：为了控制对象的访问，加一个代理人。
- 应用场景：监控、代理工具、前端框架实现等。
eg：Vue组件实现计数器
eg：DOM更新前后的钩子
前端框架中对DOM操作的代理
graph TD
更改DOM属性 -->更改虚拟DOM -->视图更新
· 组合模式
- 定义：具有树形结构的类群，使用组合模式让其变成一个树。
- 应用场景：DOM、前端组件、文件目录、部门等。
eg：React的组件结构
总结
设计模式最初是从大量案例中提取出来的解决方案模型，也就是抽象的，不是具体对每种情况严丝合缝的解决方案，所以将设计模式运用于实操中是有一定难度的。盲目追求和套用书中的设计模式显然是不行的，还是要具体案例具体分析。
// 就好像做数学题你只学了套路，你不知道为什么这样做，这样又具体能使哪些步骤便捷，甚至稍改一下题干，又不知如何使用套路。所以我觉得小白大可不深究设计模式，了解是什么大概有哪些是什么样的思路即可。更何况像刷题刷到一定程度你自然能总结出解题思路，前端学习到一定深度，自然能get到一些设计模式，那时再深入了解一下
// 只有23种设计模式？？我不信。随着技术发展，对一个具体问题有多种具体细化的解决方案，这时最好的一定是那23种分之一？？
// 还有种有趣的现象：设计模式自2014年在中国越来越热门，自2004年在全球的热度却在下降。这是为什么呢？下面文章有答案
