客户端API

元信息

• 目标：建立浏览器 API 的全景分类地图（文档/网络/多媒体/系统/设备/浏览器控制），理解浏览器从面向用户的应用软件演变为面向开发者的开发平台
• 关键概念：客户端API、DOM、WebGL、WebSocket、File API、BOM、WebDriver
• 关联阶段：cp3
• 常见误区：以为浏览器只能显示文档（API 已覆盖存储、外设、多媒体与自动化驱动）；以为这些 API 是 JS 语言自带的（它们是浏览器运行环境提供的，换个运行环境如 Node 就没有）

什么是客户端 API？

由浏览器等客户端或运行环境提供给开发者的一组可调用接口，允许开发者通过编程的方式调用浏览器运行环境中所提供的各项功能

API的种类

• 文档类：如DOM、CSSOM、Font等文档处理相关的API
• 网络类： 支持各种方式（异步、双向、实时、流媒体等）与服务端进行通讯，如XMLHttpRequest、fetch、WebRTC、Websockets、Stream
• 多媒体类：支持各种方式绘制图形图像、音频视频，提供播放音视频的UI控件，显示字幕等，如SVG、canvas、WebGL(3D)、WebGPU、WebVR等
• 系统类： 可安全调用本地系统资源，如文件https://developer.mozilla.org/zh-CN/docs/Web/API/File_API，系统通知（Notifications ）、振动硬件（Vibration ）、地理位置（Geolocation）等
• 设备类：支持安全地访问各种外设，如摄像头、指纹设备、NFC 卡等
• 浏览器控制类，访问浏览器状态，程序化驱动浏览器工作等，可用于自动化测试、爬虫等场景，如BOM、WebDriver
• 其它：随着浏览器的发展，更多原生程序的功能被加入到Web平台。

详细列表 https://developer.mozilla.org/zh-CN/docs/Web/API

浏览器应用编程

当前的浏览器已经支持各种功能，譬如客户端存储、客户端设备访问(摄像头、指纹设备)、客户端多媒体制作(2D、3D)等，并且提供API可供javascript调用

换言之，随着浏览器功能的日益强大，浏览器从一个面向终端用户的应用软件逐渐转变成为面向开发者的开发平台。

有多强？—— 视觉冲击力演示站点

下列站点全部只用浏览器 API（canvas/WebGL/WebAudio/摄像头等）实现，无需任何插件——它们是"浏览器即开发平台"的直观证据：

• Bruno Simon 作品集 — 用 WebGL 做成的 3D 越野车驾驶游戏，开着卡车逛作者的简历。游戏行业级画面，纯浏览器运行
• Three.js 官方示例库 — 数百个 WebGL 3D 示例：光影、粒子、物理模拟、全景视频，网页 3D 事实标准
• Chrome Music Lab — 谷歌出品的 WebAudio 音乐实验室：声波可视化、节奏网格、和声实验，可玩性极强
• Chrome Experiments — 数千个浏览器实验作品的画廊，canvas/WebGL 创意的集散地
• WebGL Aquarium — 经典压力测试：一条鱼拖到上千条，实时观察帧率变化，体会 GPU 渲染能力
• webapis-playground — 逐个体验各类系统/设备 API（源码）
• simpl.info — 每个 API 一个最简可运行示例（源码）

教程

• https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/
• https://wangdoc.com/webapi
  • https://github.com/ruanyf/loppo

参考手册

• https://developer.mozilla.org/zh-CN/docs/Web/API