这是我参与「第四届青训营 」笔记创作活动的第2天
设计模式
软件设计中常见问题的解决方案模型（23种）
- 历史经验的总结
- 不是具象的，与特定语言无关
三种类型
- 创建型 - 创建对象
- 结构型 - 组装对象成更大的结构
- 行为型 - 对象间的通信、职能划分
浏览器中api的设计模式
单例模式
全局唯一访问对象，在任意地方访问和修改都会反映在这个对象上。
应用：请求缓存、全局状态管理
请求缓存：发送相同的url请求，希望第二次发送请求的时候可以复用之前的一些值。
发布订阅模式（观察者模式）
订阅对象变化时，通知订阅者
定义一个User类， 构造器中初始状态置为离线，拥有一个followers对象数组，包括了该用户订阅的所有{用户，调用函数}。
每次在该用户上线时，遍历其followers进行通知。
函数作为参数传入
应用：邮件订阅、上线订阅
JavaScript中的设计模式
js可以提供api，从而实现的模式
原型模式
复制已有对象，创建新的对象
js中对象创建的基本模式
应用：创建上线订阅中的用户
代理模式
自定义控制对原对象的访问方式
应用：监控、代理工具、前端框架实现
迭代器模式
在不暴露数据类型的情况下，访问集合中的数据
用到了Symbol.iterator 该迭代器可以被 for...of 循环使用。
应用：对多种数据类型列表、树等，提供通用操作接口
前端框架中的设计模式
代理模式
前端框架对DOM的代理，通过其提供的钩子可以在更新前后进行操作.
组合模式
可多个对象组合使用（组件结构），也可以单个对象独立使用
应用：DOM、前端组件、文件目录、部门
以React组件结构中国，计数器为例
export const Count = () => {
const[count, setCount] = useState(0);
return(
<button onClick = {() => setCount((count) => count + 1)}>
count is {count}
</button>
);
};
对于中这个Count组件，渲染在App中的组合结构：
function App(){
return(
<div className = "App">
<Header />
<Count />
<Footer />
</div>
);
}
\
