【Web前端】Web API：构建 Web 应用核心！

最新推荐文章于 2025-05-31 08:02:47 发布

喵手

最新推荐文章于 2025-05-31 08:02:47 发布

阅读量1.1k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：零基础学Java 文章标签：前端 web

本文链接：https://blog.csdn.net/weixin_66592566/article/details/144023934

零基础学Java 专栏收录该内容

700 篇文章

订阅专栏

全文目录：

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

📝 前言

说起 Web 前端，很多人脑海中浮现的可能是炫酷的页面、灵活的动画、甚至可能是“奇奇怪怪”的 Bug。但是，你有没有想过，支撑这些功能的背后力量究竟是什么？没错，就是 Web API。

今天，我们就来聊一聊这个“隐藏在水面下的冰山”。Web API 是如何成为 Web 开发的基石，又是如何让我们的前端变得如此灵活与强大。放心，咱们不仅会“讲道理”，还会通过实战案例手把手带你上手，轻松搞定！

🎯 什么是 Web API？

🌟 概念理解

Web API，全称 Web Application Programming Interface，简单来说就是浏览器为我们开发者提供的一系列功能接口。通过这些接口，我们可以实现诸如 DOM 操作、网络请求、用户交互等多种能力。

换句话说，Web API 就是前端开发的“工具箱”，它让我们能够直接使用浏览器的内置功能，而无需自己从头实现。想象一下，开发一套表单验证机制，用 Web API 只需几行代码，而没有它……那可真是一场“技术劫难”。

🧩 常见的 Web API 类型

Web API 种类繁多，但它们大致可以归为以下几类：

1️⃣ DOM API

作用：操作网页结构和内容。

示例：

const header = document.getElementById('header');
header.textContent = 'Welcome to Web API World!';

2️⃣ 事件 API

作用：监听用户操作，如点击、输入等。

示例：

document.addEventListener('click', () => {
  alert('Hello, Web API!');
});

3️⃣ 网络 API

作用：发起 HTTP 请求，获取服务器数据。

示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

4️⃣ 存储 API

作用：在本地存储数据，如 LocalStorage。

示例：

localStorage.setItem('username', 'Alice');
console.log(localStorage.getItem('username'));

5️⃣ 多媒体 API

作用：操作音频、视频或获取用户设备信息。

示例：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    document.querySelector('video').srcObject = stream;
  });

💡 核心 Web API 实战案例

📂 案例一：Todo 应用（操作 DOM 和事件监听）

想快速入门 Web API？从实现一个简单的 Todo 应用开始！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo App</title>
</head>
<body>
  <h1>📋 My Todo List</h1>
  <input type="text" id="todo-input" placeholder="Add a new task">
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script>
    const input = document.getElementById('todo-input');
    const button = document.getElementById('add-btn');
    const list = document.getElementById('todo-list');

    button.addEventListener('click', () => {
      const task = input.value;
      if (task) {
        const li = document.createElement('li');
        li.textContent = task;
        list.appendChild(li);
        input.value = ''; // 清空输入框
      } else {
        alert('Task cannot be empty!');
      }
    });
  </script>
</body>
</html>

✨ 学到什么？

如何使用 DOM API 动态创建和插入元素；
使用 事件 API 捕获用户点击事件。

📂 案例二：天气查询应用（网络 API 与 DOM 结合）

目标：通过调用天气 API，显示某地实时天气。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
</head>
<body>
  <h1>🌤 Weather App</h1>
  <input type="text" id="city-input" placeholder="Enter city name">
  <button id="fetch-btn">Get Weather</button>
  <p id="weather-result"></p>

  <script>
    const input = document.getElementById('city-input');
    const button = document.getElementById('fetch-btn');
    const result = document.getElementById('weather-result');

    button.addEventListener('click', () => {
      const city = input.value;
      if (!city) return alert('City name cannot be empty!');

      fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=your_api_key`)
        .then(response => response.json())
        .then(data => {
          const temp = (data.main.temp - 273.15).toFixed(2); // 转换为摄氏度
          result.textContent = `The temperature in ${city} is ${temp}°C.`;
        })
        .catch(error => console.error('Error:', error));
    });
  </script>
</body>
</html>

✨ 学到什么？

如何用 fetch API 调用第三方接口；
将网络 API 与 DOM 操作结合，动态更新页面。

🚀 Web API 的进阶玩法与最佳实践

🌐 使用 Intersection Observer 提升性能

想让图片懒加载？使用 Intersection Observer：

const images = document.querySelectorAll('img');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(img => observer.observe(img));

🧑‍💻 结合 Web Workers 实现多线程

需要处理大量计算时，可以用 Web Worker 提升性能：

const worker = new Worker('worker.js');

worker.postMessage('Start calculation');

worker.onmessage = (event) => {
  console.log('Result:', event.data);
};