前端设计模式应用|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第4天

1）什么是设计模式

软件设计中常见问题的解决方案模型

• 历史经验的总结
• 与特定语言无关

2）设计模式背景

• 模式语言：城镇，建筑，建造（Towns,Buildings,Construction）1977
• 设计模式：可复用面向对象软件的基础

3）设计模式分类

• 创建型-如何创建一个对象
• 结构型-如何灵活的将对象组装成较大结构
• 行为型-负责对象间的高效通信和职责划分

4）浏览器中的设计模式

• 单例模式
• 发布订阅模式

1. 单例模式

全局唯一访问对象（应用于缓存，全局状态管理等）

2. 发布订阅模式

一种订阅机制，可在被订阅对象发生变化时通知订阅者。（应用广泛，从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等）

例：

5）Javascript中的设计模式

• 原型模式
• 代理模式
• 迭代器模式

1. 原型模式

复制已有对象来创建新的对象（应用于js中对象创建的基本模式）

2. 代理模式

可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理（应用于监控，代理工具，前端框架实现等）

3. 迭代器模式

在不暴露数据类型的情况下访问集合中的数据

例：

6)前端框架中的设计模式

• 代理模式
• 组合模式

组合模式可多个对象组合使用，也可单个对象独立使用，应用于DOM，前端组件，文件目录等。

例： React的组件结构

function App() {
  return (
    <div className="App">
       <Header />
       <Count />
       <Footer />
     </div>
  );
 }