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

51 阅读2分钟
02.webp

这是我参与「第四届青训营」笔记创作活动的第2天。
以下内容主要介绍了前端的一些设计模式应用。(同样只讲方向,具体实现不会细讲。)

一、什么是设计模式

设计模式 简单用一句话来讲就是软件设计中常见问题的解决问题模型,分为3类23种。

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

由于我们定义的方向为前端,所以很明显游览器是我们最经常接触的。那么接下来,我们主要探讨一下与游览器有关的设计模式。

二、游览器设计模式

在这里我们重点看一下单例模式发布订阅模式

首先呢,我们需要知道单例模式这是一个什么东东呢?
单例模式是全局的唯一访问对象。我们平常最经常使用的window对象,便是一个很好的单例模式。它主要应用与缓存和全局的状态管理等地方。

单例模式实现请求缓存:

%@L72[2@CNQW2$VT))KW]1A.jpg6M1@F0SIYV0S%B{QBAPD{TW.jpg

然后嘞,我们来看看发布订阅模式
发布订阅模式是一种订阅机制,可在被订阅对象发生变化时通知订阅者。其应用场景为从系统架构之间解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等。

发布订阅模式实现用户上线订阅:

{MMC}ODD_ANJIPN}BPRF0IX.jpg

单.jpg

二、JavaScript中的设计模式

这一部分,主要介绍原型模式代理模式迭代器模式

原型模式是复制已有对象来创建新的对象,主要用于js中对象的创建。

原型模式创建上线订阅中的用户:

VBAZ(161V_U`O.jpg

6PBFSDM7VX%7WVW1ZXP3`OB.jpg

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

代理模式实现用户状态订阅

6%SLA~GKVYMGS}D0K4_(VTA.jpg

W~O)G(%UT_@WD94B7C6PJ1.png

迭代器模式是在不暴露数据类型的情况下访问集合的数据,其主要应用于数据结构中有多种数据类型,列表,树等,提供通用操作接口。

用for...of迭代所有组件

D.jpg

B}GXPR`IB76@FG6@UU_7L}Y.jpg

因为听不懂,写的十分肤浅,呜呜呜。(萌新小白,根据课程大致写的,不喜勿喷,谢谢。)