我于7月末至8月参加了字节前端青训营，这一篇文章是关于前端设计模式的课程笔记。
概念
设计模式是软件设计中常见问题的解决方案模型，是历史经验的总结。
设计模式分类
- 创建型：如何创建一个对象
- 结构型：如何灵活地将对象组装成较大的结构
- 行为型：负责对象间的高效通信和职责划分
前端中的设计模式
浏览器API中的设计模式
单例模式
作用：创建全局唯一访问对象（如window）
常见应用场景：缓存；全局状态管理
请求缓存常用做法代码（因为js不同于严格意义上的面向对象的语言）
const cache = {};
export const request = async (url) => {
if (cache[url]) {
return cache[url];
}
const response = await api(url);
cache[url] = response;
return response;
};
发布订阅模式
作用：使得被订阅对象发生变化时通知订阅者。
常见应用场景：从系统架构之间的解耦，到业务中的一些实现模式，如邮件订阅、上线订阅等。
发布订阅模式实际使用举例代码
const button = document.getElementById("button");
const doSomthing1 = () => {
console.Tog("Send message to user");
};
const doSomthing2 = () => {
console.Tog("Log");
};
button.addEventListener("click", doSomthing1);
button.addEventListener("click", doSomthing2);
我之前听的课是addEventListener是观察者模式（底层模块抛出事件，上层模块监听，底层和上层这个概念我还要再回过去听听）（不确定监听者都是谁）
发布订阅模式实现上线订阅
// 上线订阅
class User {
constructor(name) {
this.name = name;
this.status = "offline";
this.followers = [];
}
subscribe(user, notify) {
user.followers.push({ user, notify });
}
online() {
this.status = "online";
this.followers.forEach(({ notify }) => {
notify(this);
});
}
}
JS中的设计模式
原型模式
作用：复制已有对象来创建新的对象
举例：用原型模式创建用户的上线订阅。
Object.create() 静态方法以一个现有对象作为原型，创建一个新对象。
const baseUser = {
name: "",
status: "offline",
followers: [],
subscribe(user, notify) {
user.followers.push({ user, notify });
},
online() {
this.status = "online";
this.followers.forEach(({ notify }) => {
notify(this);
});
},
};
const createUser = (name) => {
const user = Object.create(baseUser);
user.name = name;
user.followers = [];
return user;
};
代理模式
作用：自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。
常见应用场景：监控、代理工具、前端框架实现。
