这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
一、本堂课重点内容：
- JavaScript中的设计模式
-
- 原型模式
- 代理模式
- 迭代器模式
- 前端框架中的设计模式
-
- 代理模式
- 组合模式
二、详细知识点介绍：
JavaScript中的设计模式
原型模式
原型模式是创建型模式的一种，其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是我们所称的“原型”，这个原型是可定制的。
JavaScript中原型模式用的很多，是对象创建的基本模式但是别的编程语言用的很少。
代理模式
代理模式用来管控用户对另一个对象的访问.这里面有两个角色：代理对象（Proxy）和目标对象（Target）。当用户通过代理对象来操作目标对象的时候，代理对象可以把目标对象执行的操作拦截下来，以便增强或补充一些功能。
代理模式可以应用在监控、代理工具、前端框架实现等等。
迭代器模式
迭代器模式 （Iterator Pattern）又称为游标模式(Cursor Pattern)，它提供一种顺序访问集合/
容器对象元素的方法，而又无须暴露集合内部表示(到底是列表、栈还是树等)。迭代器模式可以为不同的容器提供一致的遍历行为，而不用关心容器内容元素组成结构，属于行为型模式。
可以用在数据结构中有多种数据类型，列表，树等，提供通用操作接口。不过其实现在很多编程语言都内置了这个设计模式，所以其实不必特地去记，写设计模式的那个作者也考虑过要不要移除这个设计模式。
前端框架中的设计模式
代理模式
以Vue中对DOM操作的代理为例子。用原生的JS来操作DOM的时候，步骤为更改DOM属性，然后整个视图进行更新。
但是在Vue中，存在一个代理——虚拟DOM节点，程序员更改DOM属性首先会反映到虚拟DOM节点中，虚拟DOM节点进行更新，然后使用Diff算法和实际的DOM树进行比较，对不同的部分进行视图更新，由此来提高性能。
组合模式
组合模式是可以多个对象组合使用，也可以单个对象独立使用。应用在DOM、前端组件、文件目录、部门等场景。
总结
设计模式在国内热度一直比较高，但在国外热度下降，然后维持稳定，为啥？
因为设计模式那本书出版的比较早，同时还加了很多限定，其实比较适用于面向对象。但是现在很多编程语言发展出了响应式、函数式编程，所以传统的设计模式已经不太适用了。
三、实践练习例子：
来看一个原型模式的例子
const baseUser: User = {
name:"",
status: "offline",
followers: [],
subscribe(user，notify) {
user.followers.push({ user, notify });
}
online() {
this.status = "online";
this.followers.forEach(({ notify }) => {
notify(this);
});
},
};
export const createUser = (name: string) => {
const user: User = Object.create(baseUser);
user .name = name ;
user.followers = [];
return user ;
};
核心就是const user: User = Object.create(baseUser);这一句，因为这一句会构造一个以baseUser为原型的新的对象，然后就可以这么用
四、课后个人总结：
- 设计模式不是万能的，不变的
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来的更多可能性
- 真正优秀的开源项目学习设计模式并不断实践
