一、基础概念

• 理解 Web API 的定义与作用：了解 Web API 是浏览器提供的一组接口，用于操作浏览器功能和页面内容。

• 理解 API 的分类：区分 DOM API、Fetch API、Storage API 等不同类型的 Web API 及其用途。

• 了解常见的 Web API 应用场景：如表单上传、地理位置、动画控制等。

二、核心 Web API 学习

• 掌握 DOM 操作 API：

  • 使用 document.querySelector、getElementById 等方法选取元素。

  • 操作元素属性、样式、内容与事件绑定（如 addEventListener）。

• 掌握 Fetch API：

  • 使用 fetch() 发送 GET/POST 请求。

  • 处理响应数据（.json()、.text()）与错误处理（.catch）。

  • 构造 Headers 与 Request 对象进行自定义请求。

• 掌握 Web Storage API：

  • 使用 localStorage 和 sessionStorage 存储与读取字符串数据。

  • 实现简单的数据持久化功能（如记住用户偏好）。

• 理解 URL API：使用 URL 和 URLSearchParams 解析和构造 URL。

• 理解 FormData 对象：用于构建表单数据并配合 fetch 提交文件或复杂表单。

• 理解 Blob 与 File API：

  • 使用 Blob 表示二进制数据块。

  • 使用 FileReader 读取本地文件内容（如图片预览）。

• 理解事件模型：事件冒泡、捕获、委托机制及其在实际开发中的应用。

• 了解 TextEncoder / TextDecoder：处理 UTF-8 编码的文本与二进制数据转换。

• 了解 ArrayBuffer 与类型化数组：初步认识二进制数据处理的基本单位。

• 了解 Stream API：知道流式数据处理的概念与适用场景（如大文件传输）。

三、高级 Web API 与实战应用

• 掌握 WebSocket 通信：

  • 使用 WebSocket 对象建立双向通信连接。

  • 监听 onmessage、onopen、onerror 等事件实现即时通讯。

• 掌握 Server-Sent Events (SSE)：

  • 使用 EventSource 接收服务器推送消息。

  • 实现简单的实时通知功能。

• 掌握 History API：

  • 使用 history.pushState() 和 replaceState() 实现无刷新路由跳转。

  • 结合 popstate 事件监听浏览器前进后退。

• 理解全屏 API (Fullscreen API)：控制元素进入/退出全屏模式，适用于视频播放器或游戏。

• 理解拖放 API (Drag and Drop API)：实现元素拖拽排序或文件拖入上传。

• 理解 ResizeObserver 与 IntersectionObserver API：

  • 使用 ResizeObserver 监听元素尺寸变化。

  • 使用 IntersectionObserver 实现懒加载与滚动触发动画。

• 了解 Web Workers：在后台线程执行耗时任务，避免阻塞 UI。

• 了解 Clipboard API：实现复制、剪切、粘贴功能，并处理权限请求。

• 了解 Performance API：测量页面加载时间与关键性能指标。

• 了解 Web Crypto API：进行基本的加密解密操作（如哈希、AES 加密）。

• 了解 Geolocation API：获取用户当前位置信息并显示在地图上。