重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

浏览器API(小实验):动手整理全部API

其它属性
JavaScript中规定的API
浏览器API分类实验

该思维导图由 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
收起评论
显示
设置
留言
10
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部