正式定档!QCon 北京站改期为2024年4月11-13日,地点:北京·国测国际会议会展中心 >>> 了解详情
写点什么

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

  • 2020-05-09
  • 本文字数:1287 字

    阅读完需:约 4 分钟

开源项目HTML DOM:解决原生JS中的常见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监听器。最终结果如下所示:



有些开发人员在 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


2020-05-09 09:003353

评论

发布
暂无评论
发现更多内容

收割不易,五面Alibaba终拿Java岗offer

程序知音

Java java面试 Java进阶 后端技术 Java面试八股文

你知道CleanMyMac是什么吗软件?好用吗

茶色酒

CleanMyMac X2023

Python电影售票系统

漫步桔田

秒懂算法 | 回归算法中的贝叶斯

TiAmo

算法 贝叶斯公式 贝叶斯算法

三天吃透MySQL八股文(2023最新整理)

程序员大彬

Java MySQL 数据库

架构实战营-模块三作业

🐢先生

架构实战营

最新攻略!掌握这些技巧,推特视频下载so easy!

frank

twitter

FL Studio2023中文电脑版本下载

茶色酒

FL Studio2023

time_point 的基本用法举例

老王同学

C++11

Zebec社区上线ZIP-2(地平线升级行动)提案,海量激励将被释放

威廉META

CorelDRAW2023序列号及安装下载教程

茶色酒

CorelDraw2023

Zebec社区上线ZIP-2(地平线升级行动)提案,海量激励将被释放

西柚子

EasyRecovery Photo16最新版本有哪些新功能?

茶色酒

EasyRecovery Photo16

华为云 UCS (On-Premises):运行在您本地数据中心的CCE集群

华为云开发者联盟

云计算 后端 华为云 企业号 2 月 PK 榜 华为云开发者联盟

零基础解读ChatPGT:对人类未来工作是威胁还是帮助?

华为云开发者联盟

人工智能 华为云 ChatGPT 企业号 2 月 PK 榜 华为云开发者联盟

详解Apache Sentry->Ranger平滑升级方案

华为云开发者联盟

开发 华为云 企业号 2 月 PK 榜 华为云开发者联盟

如何使用开源构建可信赖的人工智能

开源雨林

人工智能 开源

for循环中声明变量的一个问题回顾

老王同学

c++

人肉智能#003:为什么 Instagram 曾经值得尊敬

光毅

facebook Instagram

2023-02-25:请用go语言调用ffmpeg,解码mp4文件并保存为YUV420SP格式文件,YUV420P不要转换成YUV420SP。

福大大架构师每日一题

golang ffmpeg 福大大

推荐系统[八]算法实践总结V1:淘宝逛逛and阿里飞猪个性化推荐:召回算法实践总结【冷启动召回、复购召回、用户行为召回等算法实战】

汀丶人工智能

自然语言处理 推荐系统 推荐算法 推荐引擎算法

JVM课程作业

追随哆咪

Amazon S3 服务15岁生日快乐!

亚马逊云科技 (Amazon Web Services)

数据库 云计算

精华推荐 |【算法数据结构专题】「延时队列算法」史上非常详细分析和介绍如何通过时间轮(TimingWheel)实现延时队列的原理指南

洛神灬殇

数据结构 延时队列 算法框架 DelayedQueue 时间轮(TimeWheel)

JPEX宣布将在香港申请加密货币交易牌照,促进全球生态布局

股市老人

PHP Windows 下 XAMPP 的 xdebug 配置

HoneyMoose

EasyRecovery16操作简单的电脑数据恢复软件

茶色酒

EasyRecovery16

EasyRecovery16和谐版手机数据恢复软件下载

茶色酒

EasyRecovery16

FL Studio21水果最新完整版音乐编曲软件

茶色酒

FL Studio 21 FL Studio21

引领下一代操作系统技术方向 第一届OpenHarmony技术峰会成功召开

Geek_2d6073

Java 数据类型(全网最全)

kcodez

Java 后端

开源项目HTML DOM:解决原生JS中的常见DOM任务_大前端_Bruno Couriol_InfoQ精选文章