这是我参与「第四届青训营」笔记创作活动的的第六天。 今天学习了前端设计模式的应用。通过对设计模式的概念、趋势，我知道了什么是设计模式，对设计模式的理解更加深入了。通过对浏览器、JavaScript以及前端框架中的设计模式的实例讲解，我学习到了设计模式应该在什么的应用场景下使用，而且这也有利于我们去阅读一些底层的源码。这节课的内容还是非常好的，点赞！

本堂课重点内容

什么是设计模式
浏览器中的设计模式
JavaScript中的设计模式
前端框架中的设计模式

详细知识点介绍

去文末找本节课的知识点总结啦！

课后个人总结

在《设计模式》一书中，引用了Alexander的话，模式是重复问题的解决方案。而且经验永远都是靠积累的，思维习惯也是。面对复杂的业务，如何能够写出高质量的代码，我觉得还是需要自己去更深入的理解一些别人的经验，以及源码底层的实现原理。我认为设计模式的学习也是很重要的，即使我们平常很难去完全应用这些模式，但是对我们面对困难的一个思维，是很难得的。

笔记

前端设计模式应用

1、什么是设计模式

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

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

2、设计模式趋势

3、23种设计模式

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

4、浏览器种的设计模式

（1）单例模式

全局唯一访问对象。

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

（2）发布订阅模式

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

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

简单发布订阅

const button = document.getElementById("button");
const doSomething = () => {
    console.log("Send Message to user");
};

button.addEventListener("click",doSomething);

5、JavaScript中的设计模式

（1）原型模式

复制已有的对象来创建新的对象

应用场景：JS中对象创建的基本模式。

（2）代理模式

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

应用场景：监控、代理工具、前端框架实现等等。

（3）迭代器模式

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

应用场景：数据结构中有多种数据类型，列表、树等，提供通用操作接口。

6、前端框中的设计模式

（1）代理模式

普通操作：
    更改DOM属性 --> 视图更新
框架操作：
    更改DOM属性 --> 更新虚拟DOM --> 视图更新

（2）组合模式

可多个对象组合使用，也可以单个对象使用

应用场景：DOM、前端组件、文件目录等。

7、总结

设计模式不是银弹

总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
现代编程语言的多编程范式带来更多的可能性
真正优秀的开源项目学习设计模式并不断实践

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