99. 模块十二回顾与测验

核心知识点回顾

1. 拖放 API

• 加 draggable="true" 让元素可拖
• 源：dragstart、drag、dragend
• 目标：dragenter、dragover、dragleave、drop
• 必须 dragover 里 preventDefault()，否则 drop 不触发
• 传数据用 e.dataTransfer.setData() 和 getData()

2. 地理定位

• navigator.geolocation.getCurrentPosition(success, error)
• 返回 position.coords.latitude/longitude/accuracy
• 必须 HTTPS（localhost 除外）
• 需要用户授权

3. Web Workers

• new Worker("worker.js") 创建后台线程
• Worker 不能操作 DOM
• 通过 postMessage / onmessage 通信
• 适合大计算量任务，不卡主线程

4. WebSocket 与 SSE

特性	WebSocket	SSE
方向	双向	单向
协议	ws://	HTTP
复杂性	复杂	简单
适合	聊天、协作	推送、行情

5. History API

• pushState(state, title, url)：添加历史记录
• replaceState(state, title, url)：替换当前记录
• popstate 事件：后退/前进时触发
• 是单页应用路由的底层原理

6. Web Components

• customElements.define("tag-name", Class) 注册自定义标签
• Shadow DOM 提供样式隔离
• 生命周期：constructor → connectedCallback → attributeChangedCallback → disconnectedCallback
• 适合跨框架共享组件

7. File API 与剪贴板

• FileReader：readAsText、readAsDataURL
• navigator.clipboard.writeText() / readText()
• Intersection Observer：检测元素可见性
• Fullscreen API：全屏显示

测验题

题 1

拖放 API 中，要让 drop 事件触发，必须做什么？

A. 调用 dragstart 的 stopPropagation() B. 调用 dragover 的 preventDefault() C. 调用 drop 的 preventDefault() D. 不需要特别操作

答案：B

必须阻止 dragover 的默认行为，浏览器才允许在该区域放置。

题 2

Web Worker 能做什么？

A. 操作 DOM 更新页面 B. 执行耗时计算任务 C. 直接访问页面变量 D. 替代主线程执行所有代码

答案：B

Worker 在独立线程中运行，不能操作 DOM，只能通过消息与主线程通信。适合耗时计算。

题 3

以下关于 WebSocket 和 SSE 的描述，哪个正确？

A. WebSocket 只能服务器向客户端发消息 B. SSE 需要 ws:// 协议 C. SSE 比 WebSocket 更简单，基于 HTTP D. WebSocket 比 SSE 简单

答案：C

SSE 基于 HTTP 协议，配置简单，支持自动重连。WebSocket 是独立的双向协议，更复杂。

题 4

history.pushState({}, "", "/about") 会触发什么？

A. 页面跳转到 /about B. 地址栏变成 /about，但页面不刷新 C. 刷新页面到 /about D. 清除所有历史记录

答案：B

pushState 只改地址栏，不刷新页面。

题 5

想让自定义组件的样式不影响外部页面，应该用什么？

A. iframe B. Shadow DOM C. CSS Modules D. BEM 命名

答案：B

Shadow DOM 提供原生样式隔离，是 Web Components 的核心技术之一。

题 6

用 FileReader 读取用户选择的图片文件并显示预览，应该用哪个方法？

A. readAsText B. readAsDataURL C. readAsArrayBuffer D. readAsBinaryString

答案：B

readAsDataURL 返回 base64 Data URL，可直接作为 <img> 的 src。

小结

模块十二覆盖了很多实用的 Web API。记住选型的核心原则：

需要拖拽交互？ → 拖放 API
需要用户位置？ → Geolocation
计算量太大？ → Web Workers
实时双向通信？ → WebSocket
服务器推送？ → SSE
单页路由？ → History API
跨框架组件？ → Web Components
文件操作？ → File API
剪贴板？ → Clipboard API

这些 API 都是浏览器原生提供的，不需要装第三方库。需要用时查文档就行。

---

下一章进入模块十三：全局属性、事件与最佳实践。