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

这是我参与「第四届青训营 」笔记创作活动的第6天，今天学习的内容是前端设计模式应用，今天也是收获满满的一天。

知识点

什么是设计模式：软件设计中常见问题的解决方案模型

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

设计模式分类（23中设计模式）：

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

浏览器中的设计模式

• 单列模式

定义：全局唯一访问对象

应用的场景：缓存，全局状态管理等。

• 发布订阅模式

定义：一种订阅机制，可在订阅对象发生变化时通知订阅者。

应用场景：从系统框架之间解耦，到业务中一些实现模式，比如邮件订阅、上线订阅等等，应用广泛。

在图片中button是一个订阅的对象，而doSomthing函数是一个订阅者（也可以看成是一个对象）。

JavaScript中的设计模式

• 原型模式：复制已有对象来创建新的对象。

JS中对象创建的基本模式

• 代理模式:可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外的处理。

监控，代理工具，前端框架实现等

• 迭代器模式：在不暴露数据类型的情况下访问集合中的数据。

数据结构中有多种数据类型，列表，树等，提供通用操作接口

用 for of迭代所有组件 前端框架中的设计模式

• 代理模式
• 组合模式：可以多个对象组合使用，也可单个对象独立使用。

DOM，前端组件，文件目录，部门