这是我参与「第四届青训营 」笔记创作活动的第8天。

笔记小结： 课堂的知识介绍了前端设计模式的框架，据我课后知识的补充可知：现有的设计模式就有大约50中，常见的也有20种左右，所以设计模式是一门宏大而深奥的学问需要我们不断的去学习和在实践中总结。以下是对于上课时的各分段内容的复习补充。

前端框架中的设计模式

代理模式

代理模式是一种比较好理解的设计模式。使用代理对象来代替对真实对象(real object)的访问，这样就可以在不修改原目标对象的前提下，提供额外的功能操作，扩展目标对象的功能。
代理模式一半包含三种角色：
抽象主题角色（Subject）：抽象主题类的主要职责是声明真实主题与代理的共同接口方法，该类可以是接口也可以是抽象类。；
真实主题角色（RealSubject）: 该类定义了代理所表示的真实对象，是负责执行系统真正的逻辑业务对象；
代理主题角色（Proxy）：代理类；其内部持有RealSubject的引用，因此具备完全的对RealSubject的代理权。客户端调用代理对象的方法，同时也调用被代理对象的方法，但是会在代理对象前后增加一些代码处理。
在代码中，一般代理会被理解为代码增强，实际上就是扩展目标对象的功能，比如说在目标对象的某个方法执行前后你可以增加一些自定义的操作。\

eg： 前端框架中对DOM操作的代理

前端框架中对DOM操作的代理

概念：DOM就是文档对象模型（Document Object Model），当网页被加载时，浏览器会创建页面的文档对象模型。

作用：通过DOM，JavaScript能够访问和改变HTML文档的所有元素。

特点：树形结构。

DOM操作： 即Document Object Model文档对象模型。下面通过几个知识点来分析DOM的本质、节点操作、结构操作以及 DOM 的性能。

因此，DOM结构操作主要有以下三种类型：

• 新增/插入节点；
• 获取子元素列表，获取父元素；
• 删除子元素。

更改DOM属性——视图更新
更改DOM属性——更新虚拟DOM——Diff——视图更新

Dom更新前后的钩子

BeforeCreate（创建前） 该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。

在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。

Created（创建后） 在组件创建完成后立即调用 在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调 但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂载 阶段还没有开始，$el属性尚不可用 一般我们可以将对数据的初始化和初始化页面的请求放到里面，结束loading。

BeforeMount（挂载前） 该函数在挂载之前被调用，该阶段页面上还没有渲染，data已经初始化完成 ref还不可以操作 render函数 首次被调用 可以访问数据 编译模板结束 虚拟dom已经存在。

Mounted（挂载后） 该函数是在组件挂载完成之后执行的 这时候el被$el替换，已经可以操作ref了 一般在这个阶段请求数据 filter过滤器也是在这个阶段生效 服务器渲染期间不被调用

BeforeUpdate(更新前) 在数据更新时调用，在虚拟dom更新前，在特殊情况下，可以讲更新前的数据存起来，放到之后使用 这里适合在更新前访问现有的dom比如移除事件监听器 该钩子只有初次渲染会在服务端进行

Updated（更新后） 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

页面也完成了更新，此时，data数据是最新的，同时，页面上呈现的数据也只最新的。

BeforeDestroy（销毁前） 在实例销毁之前调用，这里依然可以操作，可以在这里清除定时器 防止内存泄漏

Destroyed（销毁后） 在销毁后调用 所有子实例被销毁 所有的事件监听器会被移除 在服务器渲染期间不被调用

Activated (激活时) 被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

Deactivated（停用时） 被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

ErrorCaptured (错误调用时) 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

组合模式

定义：可多个对象组合使用，可也单个对象独立使用 应用场景：DOM，前端组件,文件目录，部门 eg：React的组件结构

练习题

使用组件模式实现一个文件夹结构

• 每个文件夹可以包含文件和文件夹
• 文件有大小
• 可获取每个文件夹下文件的整体大小