这是我参与「第四届青训营 」笔记创作活动的的第4天
👋今天来讲讲前端设计模式的应用：浏览器中的设计模式、JavaScript中的设计模式、前端框架的设计模式
🤔什么是设计模式？
软件设计中常见问题的解决方案模型
- 历史经验的总结（常见问题的总结）
- 与特定语言无关（解决方案模型）
在软件设计过程中，针对特定问题的简洁而优雅的解决方案，这种就是设计模式
设计模式的背景
- 第一次有设计模式这个词大概是出现在1977年的《模式语言：城镇、建筑、建造》
- 在软件领域，在1994年的一本书《设计模式：可复用面向对象软件的基础》中也有出现（基本上我们聊设计模式都离不开这本书，但很多这本书提到的设计模式到现在已经特别不适用了，也出现了很多新的设计模式，有一些设计模式在一些语言中已经内置了）
JavaScript不是传统的面向对象的语言，所以今天我们主要了解设计模式的思想
设计模式分类
23种设计模式
- 创建型——如何创建一个对象
- 结构型——如何灵活的将对象组装成较大的结构
- 行为型——负责对象间的高效通信和职责划分
👋接下来便介绍一下前端场景下的浏览器中的设计模式
浏览器中的设计模式
单例模式
定义
存在一个全局唯一访问对象（在任何地方访问的都是同一个对象，在一个地方修改也会反映到另一个地方对对象的使用上）
应用场景
用单例模式实现请求缓存
我们在一个页面中，可能在不同的时间或是不同的地方会发出相同的请求，所以自然希望在第二次发送请求的时候可以复用一下之前的值，这时我们做一个缓存可能会带来更好的用户体验
先来看一下发送请求的类的定义：
再来看一下这个类是怎么作为一个单例来使用的：
第一个test是来描述没有缓存场景的情况，而第二个是来描述有缓存情况下的场景
上面就是一个传统的单例的一个场景
但实际上JavaScript有更多的方式来实现请求缓存，而并不是用这样的方法，也会更容易
它的实现：
发布订阅模式（观察者模式）
定义
应用场景
从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
用发布订阅模式实现用户上线订阅
用户上线订阅的定义：
使用：
以上就是浏览器中比较明显的两个设计模式：单例模式和发布订阅模式
👋接下来介绍前端另一个接触较多的：JavaScript中的设计模式
JavaScript中的设计模式
原型模式
😁（JavaScript有一个语言特性：原型链，实现了JavaScript关于继承、包括对象的一些定义，实际上这个是和原型模式是有关的。除了继承以外，原型链中的原型其实就是指原型模式）
定义
应用场景
用原型模式创建上线订阅中的用户
再来看一下是如何使用的：
与之前用发布订阅模式实现用户上线订阅的使用相比，就是将new User改为cresteUser，其他都是一样的
在JavaScript中原型模式是非常常见的，但在其他的语言中很少或者是几乎不会用到原型模式来创建一些对象
代理模式
定义
可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
应用场景
使用代理模式实现用户状态订阅
迭代器模式
定义
应用场景
前端框架中的设计模式
组合模式
定义
应用场景
组合模式的一种情况：React的组件结构
function App() {
return (
<div className="App">
<Header />
<Count />
<Footer />
</div>
);
}
总结
设计模式不是银弹（不能解决一切问题）
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来的更多可能性（我们现在用JavaScript的一些能力就可以很容易实现传统软件工程定义的设计模式）
- 真正优秀的开源项目学习设计模式并不断实践（不断学习并应用）
