这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
一、本堂课重点内容：
- 前端设计模式基本情况
-
- 设计模式定义
- 设计模式背景同步
- 设计模式发展趋势
- 设计模式分类
- 浏览器中的设计模式
-
- 单例模式
- 发布订阅模式
二、详细知识点介绍：
前端设计模式基本情况
设计模式定义
设计模式是软件设计中常见问题的解决方案模型
- 设计模式是历史经验的总结，不是科学，所以要辩证对待
- 设计模式是一种思想，与特定语言无关，不过总得来讲主要是针对面向对象语言的。
设计模式发展趋势
设计模式分类
最经典的有23种设计模式，分为三大类：
- 创建型 - 如何创建一个对象
- 结构型 - 如何灵活的将对象组装成较大的结构
- 行为型-负责对象间的高效通信和职责划分
浏览器中的设计模式
单例模式
在《JavaScript设计模式与开发实践》 中对单例模式的定义为：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式属于是比较常用的设计模式，其一个主要用途是避免重复的创建实例，节约不必要的开销。通常会在第三方库的开发中使用到，如果是项目的开发，单例模式也会用在一些数据缓存、全局通用弹窗（如登录弹窗）等一些场景中。
浏览器中很典型的就是window对象，任何地方对其操作都会引起全局变化。
发布订阅模式
基于一个事件（主题）通道，希望接收通知的对象 Subscriber 通过自定义事件订阅主题，被激活事件的对象 Publisher 通过发布主题事件的方式通知各个订阅该主题的 Subscriber 对象。
注意发布订阅模式和观察者模式有点像但是不完全相同。
三、实践练习例子：
实现一下请求缓存，请求缓存在一个页面中在不同时间不同地方会发送相同url，那么希望能复用第一次请求返回的结果，以此带来更好的用户体验。
import { api ] from"./utils"
const cache: Record<string， string> = {}
export const request = async (url: string) = {
if (cache[url]) {
return cache[url];
}
const response = await api(url);
cache[url] = response;
return response;
}
测试一下
test("should response quickly second time",async 0) = {
await request("/user/1");
const startTime = Date .now():await request("/user/1");const endTime = Date .now();
const costTime = endTime - startTime:
expect(costTime).toBeLessThan(50);
四、课后个人总结：
- 理论指导实践，再实践验证创新理论
