企业官网建设流程全解析

基于 Web-Dev-For-Beginners 的实战作业指南：Adopt an API——用外部 API 与 Local Storage 构建数据驱动的浏览器扩展

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

本作业是 Web-Dev-For-Beginners 教程中"浏览器扩展项目"第 2 课（调用 API 并使用 Local Storage）的配套实战任务：选择一个外部 API，把它"领养"进你自己的浏览器扩展，让表单真正连接真实数据、让扩展拥有跨会话的记忆。完成本作业后，你将掌握从 API 选型、扩展规划、前端实现（ES6+、async/await、try/catch、localStorage）到测试打磨、文档交付的完整开发闭环，并产出一个可加载进浏览器、可实际运行的数据驱动扩展。

一、作业定位：让静态表单"活"起来

在开始本作业之前，课程第 2 课已经带你完成了一个看似完整、实则静态的表单（起始代码见 start/src/index.js，其中仅有//1到//6的占位注释）。本作业的核心目标，正是把课程中演示的三大能力——DOM 操作、API 集成、Local Storage 持久化——迁移到你自选的 API 上：

• API 集成：让扩展通过 HTTP 请求与外部服务通信，获取实时数据（课程示例为 CO2 Signal API 的碳排放强度数据）；
• Local Storage：把用户偏好（如 API Key、地区代码）持久化在浏览器中，让扩展"记得"用户，重启浏览器后依然生效；
• 异步编程与用户体验：用async/await避免界面卡死，用加载状态与友好错误提示打磨交互。

课程的参考实现完整展示了这套模式，见 solution/src/index.js，你的作业就是在自选 API 上重现并扩展它。

二、第一步：选择你的 API

作业要求从社区维护的免费公共 API 清单中挑选一个服务。选型时的核心原则是从简单开始——优先选择无需复杂鉴权、返回结构清晰的 API。

课程为初学者推荐了以下五类热门选项：

选型检查清单：该 API 是否免费？是否需要 API Key 或 OAuth 鉴权？返回的是 JSON 还是其他格式？接口是否有速率限制（rate limit）？答案应记入你的规划文档，后续所有错误处理设计都围绕它们展开。

三、第二步：规划你的扩展

在动手写代码前，作业要求你书面回答四个规划问题，这是区分"会写代码"与"会做产品"的关键一步：

1. 你的扩展解决什么问题？（例如：课程示例解决"我的地区用电碳排放强度有多高、此时适合做哪些高耗能活动"）
2. 目标用户是谁？（例如：关注环保的日常用户、需要节能决策的上班族）
3. 哪些数据要存入本地存储？（例如：API Key、地区代码、上次查询结果；注意区分"该存的偏好"与"不该暴露的敏感信息"）
4. 如何应对 API 失败或请求频率限制？（例如：重试机制、指数退避、友好降级提示、响应缓存）

从仓库的课程设计看，这四问与课程第 2 课的状态机一一对应：CheckStorage → FirstTime/Returning → ShowForm/LoadData → FetchAPI → ShowResults → Reset（见 课程文档 中的状态图）。规划阶段就把状态迁移想清楚，实现阶段会顺畅得多。

四、第三步：构建你的扩展

4.1 必选功能清单

作业对扩展的功能下限有明确要求，逐条对照如下：

• 表单字段：为 API 必需的参数（如地区代码、API Key）提供输入控件；
• API 集成与错误处理：正确发起请求并妥善处理失败；
• Local Storage：持久化用户偏好或 API Key；
• 干净、响应式的用户界面；
• 加载状态与用户反馈：请求期间显示 loading，失败时显示错误信息。

4.2 代码要求与课程参考实现对照

作业对代码质量的要求，恰好对应课程第 2 课在 solution/src/index.js 中示范的现代 JavaScript 实践，建议逐条对照实现：

1. DOM 引用与事件监听（现代 JavaScript：const+ 箭头函数）

课程实现用document.querySelector()一次性捕获所有需要操作的页面元素，并用箭头函数注册submit与click事件：

// form fields const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); const apiKey = document.querySelector('.api-key'); // ...errors/loading/results 等 UI 元素同理 form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); // 启动时立即执行初始化

2. 异步 API 调用（async/await+try/catch）

课程参考实现（基于 axios 与 CO2 Signal API）展示了标准结构：先 await 请求，再校验响应、解析数据、更新 UI，任何异常统一进入catch分支给出友好提示：

const displayCarbonUsage = async (apiKey, region) => { try { await axios .get('https://api.co2signal.com/v1/latest', { params: { countryCode: region }, headers: { 'auth-token': apiKey }, }) .then((response) => { const data = response?.data?.data; // 校验关键数据是否缺失 if (data?.carbonIntensity == null || data?.fossilFuelPercentage == null) { throw new Error('Missing carbon intensity or fossil fuel data'); } // 更新 UI、隐藏 loading、显示结果 }); } catch (error) { console.warn('Data fetch failed:', error.message); errors.textContent = 'Sorry, data unavailable for the selected region.'; } };

作业要求你改用原生fetch()（课程文档中的教学示例即为fetch+async/await版本，无需任何外部依赖），但结构完全一致：检查response.ok、await response.json()、用模板字符串格式化输出。请为你的自选 API 重写这段逻辑，并为每个关键步骤添加有意义的注释。

3. Local Storage 三件套：setItem/getItem/removeItem

课程实现展示了完整的持久化闭环：

• 保存（setUpUser）：localStorage.setItem('apiKey', apiKey)+localStorage.setItem('region', region)，随后显示 loading、发起首次 API 调用；
• 读取与分流（init）：localStorage.getItem('apiKey')与getItem('region')，任一返回null即视为新用户（展示设置表单），否则视为老用户（直接加载已保存数据）——这正是"扩展记得你"的实现方式；
• 重置（reset）：localStorage.removeItem('region')后重新执行init()，回到首次使用状态。

注意一个值得学习的细节：reset只清除region而不清除apiKey，因为 API Key 属于长期凭据，地区才是用户想更换的偏好。

4. 加载状态与用户反馈

课程实现通过切换loading、results、form、clearBtn四个元素的style.display来管理界面状态：请求发出时显示 loading，成功后隐藏 loading 并展示结果，失败时隐藏 loading 并写入errors.textContent的用户友好消息。你的扩展必须为每个异步操作提供同样的"进行中 / 成功 / 失败"三态反馈。

5. 关于 localStorage 的安全边界

课程文档特别提示：生产环境中把 API Key 存入 Local Storage 存在安全风险，因为页面 JavaScript 可以读取该数据。本作业属于教学场景，此方案可正常使用，但应在 README 中说明，并注明真实应用应改用服务端安全存储。

五、第四步：测试与打磨

作业要求你在交付前完成四类验证：

1. 多样化输入测试：不同格式的地区代码、空值、超长输入；
2. 边界情况处理：无网络连接、API 返回非预期结构（课程实现用可选链data?.carbonIntensity == null主动校验缺失字段并抛出错误，这是值得照搬的防御式写法）；
3. 浏览器重启后验证：重启后扩展应能从 localStorage 恢复用户偏好并自动加载数据（对应init()的老用户分支）；
4. 友好错误消息：所有失败路径都应呈现可读的提示，而非控制台报错。

测试通过后，按课程说明执行npm run build（webpack 打包，脚本定义见 solution/package.json），并在浏览器扩展管理页"加载已解压的扩展程序"，选择dist目录完成加载。

六、附加挑战（加分项）

若基础功能完成，作业给出了五条进阶方向，任意实现 1～2 条即可显著拉开与基准版本的差距：

• 接入多个 API 端点，丰富扩展功能；
• 实现数据缓存，减少重复 API 调用（可在 localStorage 中为响应附带时间戳，实现带过期的缓存）；
• 创建键盘快捷键，覆盖常见操作；
• 增加数据导入/导出功能；
• 实现用户自定义选项。

七、提交要求

最终交付物为三部分，缺一不可：

1. 可运行的浏览器扩展：成功与你选择的 API 完成集成；
2. README 文件，至少说明：选择了哪个 API 及原因、如何安装与使用扩展、所需的 API Key 或环境配置、扩展实际使用中的截图（可参考仓库 start/README.md 的撰写风格）；
3. 整洁、带注释的代码，遵循现代 JavaScript 实践。

八、评分标准

作业提供了一套五维评分量表，这是自我评估的黄金标尺，逐项对照可精准定位短板：

九、上手建议

1. 从简单开始：选择无需复杂鉴权的 API，先跑通主流程；
2. 通读文档：彻底理解所选 API 的端点与响应结构，再动手写fetch；
3. 先画 UI 草图：写代码前在纸上规划界面布局与状态切换；
4. 频繁测试：增量构建，每加一个功能就测一个功能；
5. 默认失败：始终假设 API 调用可能失败，并据此设计降级路径。

十、配套资源导航

本作业的每一步都可在仓库中找到直接可参考的素材：

• 第 2 课完整课程文档：DOM 引用、事件监听、init/reset、fetch + async/await 的逐步教学代码，本作业的最佳"参考答案"；
• 作业原文（英文）：本作业的权威英文版本，评分标准以它为准；
• 课程参考实现：CO2 Signal API 的完整可运行实现，含可选链数据校验与扩展图标颜色联动；
• 起始模板：带编号占位注释的空骨架，适合作为你的编码起点；
• 项目说明与安装流程：npm 安装、webpack 构建、Edge 加载扩展、申请 API Key 的完整流程；
• 另可参阅 MDN 的浏览器扩展文档、Fetch API 指南、Local Storage 教程与 JSON 解析文档，作为实现细节的标准参考。

现在就选一个你感兴趣的 API，把它领养进自己的浏览器扩展吧——既能解决问题，又能把本课学到的 API、存储与异步编程能力练成肌肉记忆。

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners