浏览器API（小实验）：动手整理全部API

winter



该思维导图由 AI 生成，仅供参考

你好，我是 winter。今天我们来讲讲浏览器 API。
浏览器的 API 数目繁多，我们在之前的课程中，已经一起学习了其中几个比较有体系的部分：比如之前讲到过的 DOM 和 CSSOM 等等。但是，如果你留意过，会发现我们讲到的 API 仍然是标准中非常小的一部分。
这里，我们不可能把课程变成一本厚厚的 API 参考手册，所以这一节课，我设计了一个实验，我们一起来给 API 分分类。
我们按照每个 API 所在的标准来分类。所以，我们用代码来反射浏览器环境中全局对象的属性，然后我们用 JavaScript 的 filter 方法来逐步过滤掉已知的属性。
接下来，我们整理 API 的方法如下：
从 Window 的属性中，找到 API 名称；
查阅 MDN 或者 Google，找到 API 所在的标准；
阅读标准，手工或者用代码整理出标准中包含的 API；
用代码在 Window 的属性中过滤掉标准中涉及的 API。
重复这个过程，我们可以找到所有的 API 对应的标准。首先我们先把前面已经讲过的 API 过滤掉。
##JavaScript 中规定的 API
大部分的 API 属于 Window 对象（或者说全局对象），我们可以用反射来看一看现行浏览器中已经实现的 API，我这里使用 Mac 下的 Chrome 72.0.3626.121 版本。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文通过实验的方式介绍了如何整理浏览器API，并对浏览器环境中全局对象的属性进行分类。作者通过反射浏览器环境中全局对象的属性，并使用JavaScript的filter方法逐步过滤已知的属性，最终整理出各个API所属的标准。文章详细介绍了对JavaScript中规定的API、DOM中的元素构造器、Window对象上的属性以及其他属性的过滤方法，以及对每个标准的查阅和整理过程。通过实际操作，读者可以了解到浏览器API的分类和整理方法，以及对各个API所属标准的查阅过程。整个过程展现了作者对浏览器API整理的深入研究和实践经验，对于想要深入了解浏览器API的读者具有一定的参考价值。文章还提到了不同组织的标准，以及对Web API的理解提升。在面对如此繁复的API时，建议读者在系统掌握DOM、CSSOM的基础上，选择几个API来深入学习。整体而言，本文为读者提供了对浏览器API整理和分类的实用指南，有助于读者更好地理解和应用浏览器环境的API。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(10)

最新
精选

CC
经过几天的整理，终于穷尽了 Chrome 下的 API。记得之前看别人文章中介绍的各种 API 一头雾水，现在回头看，多了不少熟悉感，而且每个 API 都能落在知识树的一个节点上。分享整理所得： W3C 标准下的 API： * Web Audio API * Web Cryptography API * Media Source Extensions * The Screen Orientation API * Network Information API * Web MIDI (Musical Instrument Digital Interface ) API * IndexedDB API * Gamepad API * DeviceOrientation Event * Web App Manifest * WebVTT: The Web Video Text Tracks Format * Touch Events * Scalable Vector Graphics (SVG) * Resize Observer API * Intersection Observer * Mutation Observer * Cooperative Scheduling of Background Tasks * Service Worker API * Payment Request API * Presentation API * Web Authentication API WICG 标准下的 API： * Input Device Capabilitie * Web Bluetooth API * WebUSB API ECMA 标准下的 API： * JavaScript 全局变量 * ECMAScript 2018 Internationalization API WHATWG 标准下的 API： * Streams * Encoding * URL Khronos 标准下的 API： * WebGL 未标准化的 API： * Web Background Synchronization * WebRTC API * Document Object Model XPath * Visual Viewport API * Performance Timeline API
2019-04-24

125
阿成
整理的过程中，我发现我对翻阅标准的恐惧心降低了... 而且大概了解了一下这些spec都在干些啥(虽然也有很多并不知道他们是在干啥)... 就是花的时间有点长... 都整理完太累了... 有些词实在是检索不到spec，只能在一些犄角旮旯的地方甚至源码里看到引用... 过程中，甚至提升了搜索引擎的使用技巧：关键词 site:域名 "关键词" 结果如下（肯定有不准确的地方... 仅供参考）： https://gist.github.com/aimergenge/c0fb01dbdbf3aa1c2b31e3f2ae779274 tc39,w3c,whatwg 基本就这几个组织在推动web发展.... 另外还有个khronos管openGL、webGL等图形标准的...
2019-04-19

26
champ可口可乐了
其实，MDN上已经整理好了 https://developer.mozilla.org/en-US/docs/Web/API
2020-05-03

12
mfist
1. 通过老师的课，感觉慢慢会去翻标准了，之前学习没有见过的API，只是到MDN为止。 2. 浏览器器中大多数的对象都原型继承自Object，是否可以根据原型继承关系将window上面的api绘制成一颗树？有了这些继承关系是否更容易理清这些全局属性呢。
2019-04-18

6
🐳李小博🐳
有一个疑惑是，大小写的两个属性有什么区别 Screen，screen Event，event
2019-05-08
1
4
余文郁
winter老师，问个关于DOM获取的问题，通过querySelectorAll获取的是静态集合，但通过getElementByClassName获取的是动态集合，会随着DOM结构的变化而变化，想这些获取的HTMLCollection和NodeList如何判断是不是动态的呢，以及他们底层的原理是怎么样的呢，为什么会有动态静态之分
2019-12-31

2
扩散性百万咸面包
说实话，老师这个整理API的学习方法挺好，加深对API的整体理解，对技术也有了更全面的认知。（还可以归个类，大致分分组）以后我学其他技术的时候也用这个办法，快速上手。
2020-04-20

1
*
WHATWG、W3C这两个组织有什么区别啊
2022-04-01


Marvin
我过滤到其他API之前还剩下523个，大家呢？
2020-08-24
1

李岩
醍醐灌顶
2020-06-16



收起评论