重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32875 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

winter 2019-04-18
你好,我是 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(4)

  • 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
    35
  • 阿成
    整理的过程中,我发现我对翻阅标准的恐惧心降低了... 而且大概了解了一下这些spec都在干些啥(虽然也有很多并不知道他们是在干啥)...

    就是花的时间有点长... 都整理完太累了... 有些词实在是检索不到spec,只能在一些犄角旮旯的地方甚至源码里看到引用...

    过程中,甚至提升了搜索引擎的使用技巧:
    关键词 site:域名
    "关键词"

    结果如下(肯定有不准确的地方... 仅供参考):
    https://gist.github.com/aimergenge/c0fb01dbdbf3aa1c2b31e3f2ae779274

    tc39,w3c,whatwg 基本就这几个组织在推动web发展....
    另外还有个khronos管openGL、webGL等图形标准的...
    2019-04-19
    13
  • mfist
    1. 通过老师的课,感觉慢慢会去翻标准了,之前学习没有见过的API,只是到MDN为止。
    2. 浏览器器中大多数的对象都原型继承自Object,是否可以根据原型继承关系 将window上面的api绘制成一颗树?有了这些继承关系 是否更容易理清这些全局属性呢。
    2019-04-18
    2
  • 🐳李小博🐳
    有一个疑惑是,大小写的两个属性有什么区别
    Screen,screen
    Event,event
    2019-05-08
    1
    1
收起评论
4
返回
顶部