这是根据前端框架课程中的两个设计模式：代理模式和组合模式写的一篇方向三的笔记。下面将依次介绍代理模式和组合模式，作为初学者，检索之外也找了一些便于理解的修饰，如有错误欢迎指正！
代理模式
简介
代理模式就像是给对象加了一个“门卫”，在访问对象之前，你需要先通过这个“门卫”。这个“门卫”可以控制对对象的访问，甚至在访问之前做一些额外的操作。
优点
- 控制访问：可以在访问对象之前进行权限检查或其他操作。
- 延迟初始化：可以在需要时才创建对象，节省资源。
- 增加额外功能：可以在不修改对象本身的情况下，给对象增加新功能。
缺点
- 复杂性增加：需要额外编写代理类的代码。
- 性能开销：每次访问对象都需要通过代理，可能会有性能损失。
使用案例
假如你正在开发一个图片懒加载功能。在用户滚动页面时，你不希望立即加载所有图片，因为这会消耗太多资源。这时，你可以使用代理模式，为图片创建一个代理，当图片进入可视区域时，代理才去加载实际的图片资源。
class ImageProxy {
constructor(src) {
this.src = src;
this.image = null;
}
display() {
if (!this.image) {
this.image = new Image();
this.image.src = this.src;
}
document.body.appendChild(this.image);
}
}
组合模式
简介
组合模式允许你将对象组合成树形结构，以表示“部分-整体”的层次结构。这样，客户可以统一对待单个对象和组合对象。
优点
- 统一接口：可以对单个对象和组合对象使用相同的接口。
- 灵活性：可以很容易地添加新的组件类型。
缺点
- 理解难度：对于初学者来说，理解组合模式的结构可能有些困难。
- 设计复杂性：需要更多的设计工作来确保组件可以正确地组合。
使用案例
假设你正在开发一个文档编辑器，文档中可以包含文本、图片、表格等多种元素。使用组合模式，你可以将这些元素视为树形结构中的节点，每个节点都可以有子节点。
class Component {
constructor(name) {
this.name = name;
this.children = [];
}
add(component) {
this.children.push(component);
}
remove(component) {
this.children = this.children.filter(c => c !== component);
}
operation() {
this.children.forEach(child => child.operation());
}
}
class Leaf extends Component {
operation() {
console.log(`${this.name} is working`);
}
}
class Composite extends Component {
operation() {
console.log(`${this.name} is processing`);
super.operation();
}
}
最后
好啦！以上就是代理模式和组合模式的详解，包括它们的优缺点和实际应用案例。这篇笔记到这就结束了
