一、设计模式
1.1分类
- 创建型：如何创建对象
- 结构性：如何灵活的将对象组装成较大的结构
- 行为型：负责对象间的高效通信和职责划分
1.2 浏览器中的设计模式
1.2.1 单例模式
定义：全局唯一访问对象
应用场景；缓存，全局状态管理
- 实现请求缓存
1.2.2 发布订阅模式
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者
应用场景：从系统框架之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛
二、 JavaScript中的设计模式
2.1 原型模式：
定义：复制已有对象来创建新的对象
应用场景：js中对象创建的基本模式
2.2 代理模式：
定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
应用场景：监控、代理工具、前端框架实现
2.3 迭代器模式：
定义：在不暴露数据类型的情况下访问集合中的数据
应用场景：数据结构中有很多数据类型，列表，树等，提供通用操作接口
三、前端框架中的设计模式
3.1 代理模式
- vue组件实现计数器
代理模式（Proxy Pattern）：前端设计模式中的代理模式是一种结构型模式，它允许在不改变原始对象的情况下，通过引入一个代理对象来控制对原始对象的访问。代理对象充当原始对象的中介，客户端与代理对象交互，代理对象再将请求转发给原始对象。
代理模式在前端开发中经常被用来处理一些复杂或者耗时的操作，例如图片的懒加载、缓存等。代理对象可以在加载图片时显示占位符，当图片加载完成后再替换占位符，从而提高页面加载速度和用户体验。
另外，代理模式还可以用来实现一些权限控制的功能。例如，在用户登录后，代理对象可以检查用户的权限，只有具有相应权限的用户才能够访问某些功能或者页面。
在 JavaScript 中，代理模式通常使用 ES6 中新增的 Proxy 对象来实现。Proxy 对象允许拦截对对象的各种操作，包括读取、赋值、函数调用等。通过使用 Proxy 对象，我们可以在不改变原始对象的情况下，控制对原始对象的访问。
3.2 组合模式
定义：可多个对象组合使用，也可单个对象使用
应用场景：DOM、前端组件、文件目录、部门
组合模式（Composite Pattern）是一种结构型设计模式，它允许将对象组合成树形结构以表示"部分-整体"的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性，可以以相同的方式处理它们。在前端开发中，组合模式常用于处理嵌套的组件结构，使得组件可以以统一的方式进行操作和管理。本文将介绍如何在前端中实现组合模式，并提供具体的代码示例和解读。
