浏览器的隐藏超能力：Web API开发者指南（4部分系列）
你的浏览器有超能力，是时候学会使用它们了 ← 当前文章
你肯定经历过这种情况。
你需要发起一个简单的HTTP请求。你输入 npm install axios。
你想要在滚动时为元素添加动画。你输入 npm install aos。
你需要管理一些简单的状态。你开始用React、Vue或Svelte搭建项目。
不知不觉中，你的 node_modules 文件夹变成了一个千兆字节大小的黑洞，你的构建过程需要一分钟，而你向用户发送了数十甚至数百千字节的JavaScript，仅仅是为了让一个网页感觉有交互性。
我们作为开发者，已经成为了抽象化的大师。我们站在巨人的肩膀上，使用令人难以置信的框架和库来比以往更快地构建令人惊叹的东西。但在我们急于构建的过程中，我们开始忘记我们正在构建的平台。
如果我告诉你，你需要的功能最强大、性能最好、最稳定的工具已经安装在每个用户的机器上了呢？
它就是浏览器本身。
框架跑步机 vs 平台
框架是神奇的工具。它们用优雅的声明式模式解决复杂的问题，如状态管理和组件渲染。它们不是敌人。
但对它们的过度依赖可能会成为一种拐杖。我们学习框架的做事方式——用useState管理状态，用axios获取数据——而从未学习框架本身在底层可能正在使用的原生、内置的等效功能。
这个系列是关于揭开那层抽象的。它是关于理解Web平台的原始力量。它是关于学习使用浏览器的"隐藏超能力"——Web API。
这不是一个反框架系列。这是一个支持开发者的系列。 目标是让你成为一个更全面、更有知识、更有效的工程师，无论你选择使用什么工具。
那么，什么是"Web API"？
这是我们最需要正确理解的概念。当你编写JavaScript时，你实际上在处理两个不同的东西：
JavaScript (ECMAScript)： 这是语言本身。它有变量、对象、函数、循环和数据结构的规范（const、let、() => {}、map、filter）。就其本身而言，JavaScript没有"按钮"、"HTTP请求"或"用户位置"的概念。它只是一个罐子里的大脑。
Web API（浏览器环境）： 这些是浏览器给JavaScript的"四肢和感官"。它们是允许你的代码与世界互动的钩子。
这样想：
想要改变页面上的某些东西？你使用DOM API。
需要从服务器获取数据？你使用Fetch API。
想要存储用户的偏好？你使用Storage API。
需要弹出通知？你使用Notifications API。
这些不是JavaScript语言的一部分；它们是浏览器环境赠送给你的工具。而且它们非常强大。
我们的共同旅程：系列路线图
在接下来的几篇文章中，我们将踏上发现这些API的旅程。我们将从简单开始，逐步构建到允许你在浏览器中直接构建接近原生体验的概念。
第1部分：超越JavaScript：什么是Web API以及为什么它们很重要？
我们将巩固我们的理解，并看看具体的好处：性能、稳定性和零依赖。
第2部分：为页面注入生命：掌握DOM API
学习使用现代的原生JavaScript查找、创建和操作网页上的任何元素。
第3部分：浏览器的背包：数据获取与存储
我们将掌握用于网络请求的现代fetch，并学习如何使用Web Storage API保存数据。
第4部分：弥合数字与物理的鸿沟：设备和硬件API
这是魔法发生的地方。我们将访问地理位置、发送系统通知，并与用户的剪贴板互动。
第5部分：速度的需求：使用Workers的性能和离线功能
学习如何使用Web Workers在后台运行重任务而不冻结UI，并使用Service Workers让你的应用离线工作。
第6部分：现代Web游乐场：回顾和展望未来
我们将把所有内容整合在一起，并看看正在塑造Web未来的令人兴奋的新API。
这是为谁准备的？
新开发者，想知道框架下面发生了什么。
React/Vue/Angular开发者，从未写过原生的fetch请求或document.querySelector。
资深开发者，想要了解已经取代了XMLHttpRequest和float等旧方法的现代、强大的API。
任何想要编写更轻、更快、更健壮的Web应用程序的人。
是时候看看引擎盖下面，成为平台本身的大师了。
敬请期待第1部分，我们将深入探讨为什么了解这些API会让你成为一个更有资源、更有价值的开发者。
为什么这很重要？
在现代Web开发中，我们经常被框架的便利性所吸引，以至于忘记了底层平台的强大功能。这种依赖可能导致：
性能问题：不必要的依赖增加了包的大小和加载时间
复杂性增加：学习曲线陡峭，需要理解框架特定的概念
维护负担：依赖更新、安全漏洞和兼容性问题
技能限制：过度依赖框架可能限制对底层技术的理解
通过掌握Web API，你将获得：
更好的性能：减少依赖，更小的包大小
更深的理解：了解框架在底层是如何工作的
更大的灵活性：能够在不依赖特定框架的情况下构建功能
更好的调试能力：理解底层机制有助于更好地调试问题
总结
这个系列的目标不是让你放弃框架，而是让你成为一个更全面的开发者。通过理解Web API，你将能够：
在需要时使用原生解决方案
更好地理解你使用的工具
做出更明智的技术决策
构建更高效、更可靠的应用程序
无论你选择使用什么工具，对底层平台的理解都将使你成为一个更好的开发者。