前言

背景

这篇文章写的有点太晚了,以至于当时为什么要写的原因都想不起来了😂。大概原因是当时在代码中看到了一个之前从未见过全局方法,查了一下文档,不是 JavaScript 的全局方法,而是 DOM 的全局方法。当时脑子一下就懵了,DOM 到底是什么了?

DOM 是什么

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将 web 页面和脚本或程序语言连接起来。

一句话总结:文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。

在查阅了 MDNWiki 之后,我想我终于唤醒了沉睡的记忆。

MVVM 框架出现之前

其实我很久之前一直都是使用 DOM 的,只是随着时间的退役忘记了。在诸如 React/Vue/Angular 这些前端 MVVM 框架出现之前,前端唯一一统天下的库就是 jQuery 了。jQuery 的工作原理很简单,就是使用 JS 暴力直接调用 DOM 接口从而实现动态修改 html 页面的目的。只不过为了屏蔽不同浏览器的细节,jQuery 做了一层封装。那个时候的我们都是直接和 DOM 打交道的。

MVVM 框架出现以后

但是随着前端功能越来越复杂,工作越来越重,直接操作 DOM 越来越难维护,在 MVVM 框架出现了以后,我们在使用 MVVM 框架的时候,都是直接框架提供的语法、变量和方法,一般是不直接和 DOM 打交道的,因此我就把 DOM 忘记了。然而 DOM 并不是不存在了,而是被 MVVM 框架封装起来了,由框架去调用。之前在学习珠峰培训的手写 MVVM 实现原理的课程中,就看到了如何将操作 DOM 封装在框架中的实现方式。

参考资料