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

68 阅读3分钟

🎯课程表

📋前言

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

第五届字节跳动青训营的课程已经进入尾声了,保持上课的节奏和学习,年前那段时间落下了一些内容,要学习内容较多,因此分为几个部分来学习,课程的内容是学习JavaScript和前端框架中的设计模式的内容,通过该篇文章记录在课程中学到的知识以及重点,对此做相对应的笔记来巩固学习。

📑课程介绍

  • 本节课将围绕 JavaScript 和其他前端框架中的设计模式展开,其中,将重点讲解 JavaScript 中的原型模式、代理模式、迭代器模式,在前端框架中设计模式介绍上,则是围绕代理模式和组合模式展开。

🔥课程重点

  1. JavaScript 三大设计模式
  2. 前端框架中的设计模式

📝具体笔记

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

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

b2bfd761f22ec47a45dd74412738521.png

模式语言: 城镇、建筑、建造 (A Pattern01Language: Towns, Buildings, Construction)1977

设计模式:可复用面向对象软件的基础02(Design Patterns: Elements of ReusableObject-Oriented Software) 1994 553601f1de05b6c397508343ad5e734.png

7b86954dedcf8e63e2a8f6533d8f546.png

c29fa2e2c9fcfc849134704562a6f7b.png

fbc4c3a8b95bbd663bf1e6ee034110a.png

单例模式

单例模式,属于创建类型的一种常用的软件设计模式。通过单例模式的方法创建的类在当前进程中只有一个实例(根据需要,也有可能一个线程中属于单例,如:仅线程上下文内使用同一个实例) 601e9ba267eebe2283efd15ee0a5214.png

8a8986c3e2598360790b72077ac389f.png

bd08ef2dffc58d9f8a2558ee56b75a3.png

9ee88a0ed5a5baa1c62c355e42df999.png

发布订阅模式

在软件架构中,发布订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。

b0481454011d08cfd7947c7f095170a.png

e57f4adee694cf9f117388f6941c6cb.png

5e971f3c1c6e8afa4c3fea6837bf6d7.png

JavaScript三种核心设计模式

image.png 一、单例模式

  1. 保证一个类仅有一个实例,并提供一个访问它的全局访问点
  2. 设计思路:如果存在,不创建,直接返回,不存在才创建。

二、组合模式

组合模式将对象组合成树形结构,以表示“部分整体”的层次结构。 除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性。

三、观察者模式

发布——订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript开发中,我们一般用事件模型来替代传统的发布 — 订阅模式。

image.png

image.png

7d4215b1d4ebd83c7b13a15ee1fb935.png

96da66c5e9dd4adef923857335470f1.png

a75c0d3c8029f3dd639788c3580b619.png

66d8a133e264b59776d32bfbbb91cad.png

文章仅为个人学习笔记,如有错误,欢迎指正。