这是我参与「第五届青训营 」伴学笔记创作活动的第11天。
一、本堂课重点内容
- 单例模式
- 发布订阅模式
二、详细知识点介绍
设计模式
软件设计中常见问题的解决方案模型
- 历史经验的总结，各种工程化领域都有
- 与特定语言无关，不是特别具象的东西，是一种模式或实现方法
《设计模式：可复用面向对象软件的基础》，已经出现了一些新的设计模式，而且有的语言已经内置了一些设计模式。
23种设计模式：
- 创建型，如何创建一个对象，更好的性能，更灵活的创建
- 结构型，如何灵活的将对象组装成较大的结构，一个应用由多个对象构成，如何组装
- 行为型，负责对象间的高效通信和职责划分，谁先做什么，谁后做什么
浏览器中的（API）设计模式
单例模式
全局唯一访问对象，任何地方访问和修改的都是同一对象。
如window对象，浏览器所有操作的封装的对象，或全局缓存和全局状态管理等。
创建实例化对象时，不设定存储数据，调用函数时，输入需要的参数，定义生成一个实例化对象，就可以执行所有需要的效果。
发布订阅模式（观察者模式）
一种订阅机制，可在被订阅对象发生变化时通知订阅者。订阅者一般是个对象，但JS中订阅对象可以是对象或函数。
从系统架构之间的解耦，到业务中一些实现模式，组件通信、上线订阅等。
前端在之前使用jq的时候就有使用到发布订阅模式例如有trigger和on方法，现在vue中也经常使用到如：事件总线进行组件间的传值、子父组件间的传值、vue实现双向绑定等等。
三、实践实习例子
用单例模式实现请求缓存
class Request {
static instance: Request;
private cache: Record<string, string>;
constructor() {
this.cache = {};
}
static getInstance() {
if (this.instance) {
return this.instance;//有单例的实例，则直接返回
}
this.instance = new Request();//否则创建一个
return this.instance;
}
public async request(url: string) {
if (this.cache[url]) {//有缓存直接返回缓存
return this.cache[url];
}
const response = await api(url);//否则请求数据
this.cache[url] = response;
return response;
}
}
发布订阅模式
事件监听的例子
const btn = document.getElementById("btn");
const do1 = () => {
console.log("do1");
};
const do2 = () => {
console.log("do2");
};
btn.addEventListener("click", do1);
btn.addEventListener("click", do2);
用户订阅上线的例子
type Notify = (user: User) => void;//类型定义，订阅函数，就是被订阅的用户上线后在订阅的用户处做什么
export default class User {
name: string;
status: "offline" | "online";
followers: { user: User; notify: Notify }[];//粉丝列表
constructor(name: string) {
this.name = name;
this.status = "offline";
this.followers = [];
}
subscribe(user: User, notify: Notify) {
user.followers.push({ user, notify });//被订阅的人的粉丝列表里添加一项
}
online() {
this.status = "online";
this.followers.forEach(({ notify }) => {//通知每一个粉丝，被订阅的用户上线了
notify(this);
});
}
}
四、课后个人总结
本节课学习了软件工程中设计模式的历史和发展，以及JavaScript中的单例模式和发布订阅模式。对于传统面向对象语言而言，JavaScript拥有更多新特性，使得一些设计模式的实现更加方便。JavaScript的声明式编程让发布订阅模式更加易于理解和构造，在不同业务场景下，灵活使用不同的设计模式能使程序更加简洁高效。
设计模式是软件工程层面的形式化描述，不同编程语言都可以实现，设计模式思想是可以通用的。在实际编程场景下，要注意灵活运用和总结经验，认真学习前人经验。
五、参考链接
js单例模式_毎天要喝八杯水的博客-CSDN博客_js单例模式
