JavaScript 和前端框架中的设计模式 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

本节课将围绕 JavaScript 和其他前端框架中的设计模式展开，其中重点是JavaScript中的设计模式。 一.JavaScript中的设计模式

二.前端框架中的设计模式

一.JavaScript中的设计模式

1.原型模式

原型模式是基于原型继承的。在这种模式中，被创建的对象充当其他对象的原型。实际上，原型（prototype）是被创建的每个对象构造函数的蓝图。

这里举的例子是用原型模式创建上线订阅中的用户

2.代理模式

代理模式为一个对象提供一个代用品或占位符，以便控制对它的访问

了解一下代理模式的核心功能：

当客户不方便直接访问一个 对象或者不满足需要的时候，提供一个替身对象 来控制对这个对象的访问，客户实际上访问的是 替身对象。

替身对象对请求做出一些处理之后， 再把请求转交给本体对象

代理和本体的接口具有一致性，本体定义了关键功能，而代理是提供或拒绝对它的访问，或者在访问本体之前做一 些额外的事情

这里举的例子是用代理模式实现用户状态订阅

优化为

3.迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

该模式的核心是在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素

二.前端框架中的设计模式

1.代理模式

利用代理模式实现的应用模块

2.组合模式

利用组合模式实现的应用模块

总结

本节课将围绕 JavaScript 和其他前端框架中的设计模式展开，重点学了 JavaScript 中的原型模式、代理模式、迭代器模式，在前端框架的设计模式方面则学了代理模式和组合模式。