Web API集成

Web API 是浏览器提供给我们与网页、设备、网络交互的接口。本文深入解析最核心的 Web API 集成技术，涵盖 DOM 操作、Fetch 网络请求、客户端存储、Canvas 绘图、地理位置等。通过大量代码示例和可交互演示，帮助你在实际项目中熟练运用这些 API，构建功能丰富且高性能的现代 Web 应用。

DOM API：文档对象模型核心

DOM 是网页的编程接口，允许 JavaScript 访问和修改 HTML 结构、样式和内容。以下是最常用的 DOM 操作模式。

                            // 选取元素

                            const header = document.getElementById('header');

                            const buttons = document.querySelectorAll('.btn');

                            // 修改内容和属性

                            header.textContent = '新标题';

                            header.style.color = '#2563eb';

                            header.classList.add('active');

                            // 创建和插入元素

                            const newDiv = document.createElement('div');

                            newDiv.innerHTML = '<p>动态创建</p>';

                            document.body.appendChild(newDiv);

                            // 事件监听

                            button.addEventListener('click', (e) => {

                              console.log('点击位置:', e.clientX);

                            });

交互演示：计数器 (DOM 更新)

当前计数: 0

单击按钮更新DOM

通过 addEventListener 可以附加任意数量的事件处理函数，实现解耦的交互逻辑。现代框架底层也大量依赖这些基础 DOM 方法。

Fetch API：现代网络请求

Fetch 提供了一种更强大、更灵活的方式来发起 HTTP 请求，基于 Promise 设计，替代传统的 XMLHttpRequest。

                            // GET 请求示例

                            fetch('https://api.example.com/data')

                              .then(response => {

                                if (!response.ok) throw new Error('网络异常');

                                return response.json();

                              })

                              .then(data => console.log(data))

                              .catch(err => console.error(err));

                            // POST 请求 (提交JSON)

                            fetch('https://api.example.com/users', {

                              method: 'POST',

                              headers: { 'Content-Type': 'application/json' },

                              body: JSON.stringify({ name: '张三', age: 30 })

                            });

模拟 Fetch 请求

点击按钮模拟请求响应

注意：实际开发中需处理 loading 状态、超时、取消请求等场景。可用 AbortController 取消 fetch。

Web Storage：本地存储

localStorage 和 sessionStorage 提供了简单的键值对存储，数据保存在浏览器中。localStorage 持久化，sessionStorage 会话级。

                            // 存储数据

                            localStorage.setItem('theme', 'dark');

                            sessionStorage.setItem('token', 'abc123');

                            // 读取数据

                            const theme = localStorage.getItem('theme');

                            // 移除数据

                            localStorage.removeItem('theme');

                            sessionStorage.clear();

存储演示

等待操作...

Canvas API：动态绘图

Canvas 2D 上下文允许你通过 JavaScript 绘制图形、文字、图像，适合图表、游戏、视觉特效。

                            // 获取 canvas 上下文

                            const canvas = document.getElementById('myCanvas');

                            const ctx = canvas.getContext('2d');

                            // 绘制红色矩形

                            ctx.fillStyle = '#2563eb';

                            ctx.fillRect(10, 10, 100, 60);

                            // 绘制圆形

                            ctx.beginPath();

                            ctx.arc(200, 40, 30, 0, Math.PI * 2);

                            ctx.fillStyle = '#10b981';

                            ctx.fill();

Geolocation API：获取位置

通过 navigator.geolocation 可以获取用户设备的地理位置（需用户授权）。常用于地图、本地服务。

                            // 获取当前位置

                            navigator.geolocation.getCurrentPosition(

                              (position) => {

                                const { latitude, longitude } = position.coords;

                                console.log(`纬度: ${latitude}, 经度: ${longitude}`);

                              },

                              (error) => console.warn('定位失败', error)

                            );

                            // 持续监视位置

                            const watchId = navigator.geolocation.watchPosition(success, error);

模拟地理位置

点击显示模拟坐标

WebSocket：全双工通信

WebSocket 允许客户端和服务器之间建立持久连接，实现实时数据推送（聊天、股票、游戏）。

                            // 建立连接

                            const socket = new WebSocket('wss://example.com/socket');

                            // 监听事件

                            socket.onopen = () => socket.send('Hello 服务器');

                            socket.onmessage = (event) => console.log('收到:', event.data);

                            socket.onclose = () => console.log('连接关闭');

💬 模拟 WebSocket 消息

等待响应...

综合案例：简易记事本

结合 DOM 操作、localStorage 和事件处理，实现一个简易记事本，数据自动保存。

                            // 核心逻辑

                            const textarea = document.getElementById('note');

                            // 加载保存的内容

                            textarea.value = localStorage.getItem('note') || '';

                            // 实时保存

                            textarea.addEventListener('input', () => {

                              localStorage.setItem('note', textarea.value);

                            });

📝 编辑内容自动保存：

最佳实践与性能

使用 Web API 时应注意性能、兼容性和用户体验。

批量操作 DOM 使用 document.createDocumentFragment 减少重绘。
Fetch 请求考虑超时与取消（AbortController）。
存储敏感信息避免使用 localStorage，可用 sessionStorage 或 httpOnly cookie。
Canvas 频繁绘制时使用 requestAnimationFrame 优化。
地理定位始终提供降级方案并处理错误。
通过 addEventListener 的 passive 选项提升滚动性能。

                        // 使用 AbortController 取消 fetch

                        const controller = new AbortController();

                        fetch(url, { signal: controller.signal });

                        // 超时或取消时调用

                        controller.abort();