[关闭]
@levinzhang 2020-05-02T18:28:32.000000Z 字数 1625 阅读 718

解决原生JS中常见的DOM任务:HTML DOM项目

by

摘要:

开源项目HTML DOM提供了100多个vanilla JavaScript代码片段,用于执行常见的DOM操作任务。这些任务的难度从简单(获取某个元素的class)到高级(创建可调整大小的切分视图)不等。这个项目可以用于教育学习,也适用于需要自行操作底层DOM的组件开发人员。


开源项目HTML DOM提供了100多个vanilla JavaScript(vanilla JS是一个所谓的JavaScript框架,但实际上指的就是原生的JavaScript,这是一种调侃和恶作剧的说法,参见vanilla-js站点stackoverflow上的讨论——译者注)代码片段,用于执行常见的DOM操作任务。这些任务的难度从简单(获取某个元素的class)到高级(创建可调整大小的切分视图)不等。这个项目可以用于教育学习,也适用于需要自行操作底层DOM的组件开发人员。

该项目的核心贡献者Phuoc Nguyen阐述了项目的基本原理和意图:

如果你在任意框架中开发或使用Web组件的话,那么必须要在一定程度上使用DOM。

在Web开发中,了解浏览器的DOM API以及如何使用它们是非常重要的。如果有一个Web站点将这些API、众所周知的问题以及最流行的疑问汇总起来,那么它将是非常有用的。

HTML DOM片段只使用了原生浏览器的API,所以不需要任何外部的库。它们通过由万维网联盟(World Wide Web Consortium,W3C)(W3C)所标准化的每个现代浏览器的都支持原生浏览器API来实现,除此之外,浏览器厂商还会与一些平台,如Web平台孵化器社区群组(Web Platform Incubator Community Group,WICG)响应式问题社区群组(Responsive Issues Community Group,RICG),讨论创新性的特性。

HTML DOM的代码片段根据估计的复杂性和所需的先验知识分成了三个类别。基础任务包括附加或解除事件处理器、检索元素的兄弟节点以及更新元素的CSS样式等等。

中级任务包括计算滚动条的大小获取元素的第一个可滚动父元素
iframe与其父窗口之间进行通信
下载文件导出表格到CSV或者动态加载CSS文件等等。

高级任务包括创建可调整大小的切分视图拖拽-滚动交互创建可调整大小的元素以及通过单击表头对表进行排序等等。

创建可调整大小的元素相关的代码片段由20行CSS、7行HTML和30多行JavaScript组成。HTML包括用于显示底部和右侧边框的div。当鼠标位于HTML元素的句柄上时,CSS代码会更改光标的样式。JavaScript处理交互逻辑,包括根据用户是否拖动句柄来设置和删除mousemove监听器。最终结果如下所示:

demo snipped for making a resizable element only with vanilla JS, HTML and CSS

有些开发人员在Hacker News上表达了他们对该项目的热情。有位开发人员这样说到:

非常整洁的资源,我已经收藏了。

在SPA时代,vanilla JS在哪些地方依然有用武之地呢?

  • 大部分都是静态HTML,首次渲染的时间非常重要,我们只需要有一点点(可能会逐渐增加)天分就够了。
  • 可以内联即时加载/执行,不需要捆绑下载(或SSR)。
  • 代码的容量和作用域都有限,所以出现结构/意大利面的问题也不是什么事儿。
  • 你可以把它从SPA包中分离出来,所以交付变更能够完全从SPA CI/CD过程中解耦出来,可以根据你的喜好频繁地交付,而且速度非常快。

另外一位开发人员强调了该项目在教育学习方面的价值

根据我的经验,MDN文档是最好的浏览器前端参考。

但是,这个站点满足了一个不同的需求:提供了一个面向指南/如何实现的文档,这通常是我们所需要的。

HTML DOM可以基于MIT开源许可证使用。欢迎通过GitHub项目提交贡献和反馈。

查看英文原文:
108 Common DOM Tasks in Vanilla JS: the HTML DOM Project

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注