打通 DOM 的设计架构
前两节回顾:
进入了 window 的办公室后,我看她正听着音乐:
见我进来后,她摘掉耳机,并问道:“DOM 最近进展如何?”。
我说道:“关于我以后的工作,大方向上我还有一些疑问需要向你请教一下”。
window 说道:“那我就给你说说你以后需要做的工作,我给你提供一个大的方向,至于细节还需要你自己来考虑。你主要的工作是三块:第一、事件,你能够处理用户的事件,比如按钮点击;第二、节点的操作,比如插入一个新的节点,删除节点;第三、修改样式,比如我前面给你举得修改背景颜色的例子”。
走出 window 的办公室,回到工位以后,我想了想,既然我主要有三个主要的任务,那么我把这些任务通过三个对象来管理。EventTarget 负责处理事件;Node 负责处理节点操作;Element 代表元素,负责处理一些样式的修改。我画了一张图:
随后,我便继续开始设计 getElementById('id') 这个功能。当开发者调用 getElementById 时返回的结果是一个 Element 对象?这样做会不会给后续带来问题?我心中不断反问自己。
正当我思考如何设计一个元素 Element 的时候,一位哥们从我的身旁走过,只见他衣服上写着“SVG”。
他的出现打乱了我的思绪,我好奇地查了下 SVG。原来他的主要工作是创建矢量图,可嵌入到 HTML 中用来表示图。开发者也会通过我来访问到他的一些信息。
我又看到了一段开发者的代码:
代码中包含有 h1、div、p、img 这样的标签,每一种标签又包含了不同的属性。这些标签可以通过 Element 来表示,但是他们却有各自不同的功能。那只能通过不同对象来表示不同的标签,比如 HTMLDivElement 专门来负责管理所有的 div 标签,HTMLImageElement 来管理所有的 img 标签。
我的思路一下打开了,我便画了下面一张草图:
整体架构图已经确定,下面唯一要确定的是各个对象需要负责的事情。
HTMLElement 的架构图:
Element 的架构图:
Node 的架构图:
EventTarget 的架构图:
「公众号素燕注:EventTarget -> Node -> Element -> HTMLElement -> HTMLDivElement 形成了继承体系,不同的对象负责不同的事情。关于这些对象还有很多属性和方法,上图中只列出了部分,可以通过 MDN 了解更多」
花了一上午的时间总算画完了基本的架构图,我把开发者的代码转换一下,结构如下:
画完整个架构图后,我对自己的整体思路还是满意,决定下班前找 window 汇报一下。
我来到 window 的办公室门口,敲了敲门。window 轻轻说了声:“请进”。
本节完!
公众号素燕注:本节内容主要讲了 DOM 的设计,按照继承体系来说明,EventTarget -> Node -> Element -> HTMLElement -> HTMLDivElement 这是 div 标签一条完整的继承链。
有人可能分不清 DOM 和 document 的区别。浏览器中的渲染引擎是无法理解 HTML 的,需要把 HTML 通过转换成渲染引擎能够理解的结构,而这种结构就是 DOM,一种树状结构。而 document 就是一个浏览器中的对象,通过这个对象可以操作 DOM 结构。
在 HTML 中,通常把代码的 div、p、span 这些称为标签,是静态的,在内存中的标签我们通常称为元素。
推荐阅读:
关于晋升的一点思考
你可能不需要一个 UI 设计师
上次忘记推荐这本 JavaScript 书籍了