前端 Web API 一并拿下

前端 Web API 是指一组浏览器内置的 API 接口，它们为前端开发者提供了与浏览器环境及用户设备进行交互的能力。这些 API 允许开发者访问和操作浏览器的各种功能，从而增强网页的互动性和功能性。前端 Web API 通常用于实现与用户的交互、数据处理、图形渲染等多种功能。

常见的前端 Web API 包括：

1. DOM (Document Object Model) API

   • 提供了操作 HTML 或 XML 文档的方法，包括创建、修改、删除元素，以及绑定事件处理器等。

document.body.innerHTML = '<h1>Hello, DOM!</h1>'; 
const heading = document.querySelector('h1'); 
heading.style.color = 'red';

1. BOM (Browser Object Model) API

   • 提供了对浏览器窗口和浏览器历史记录的访问与操作，如获取和设置浏览器窗口的尺寸、位置，控制浏览器的前进、后退等。

window.alert('Hello, World!'); 
window.open('https://www.example.com', '_blank');

1. XMLHttpRequest API 和 Fetch API

   • 这两个 API 主要用于在前端与服务器之间进行数据交互。Fetch API 是 XMLHttpRequest 的现代化替代方案，提供了更简洁的语法。

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

1. Geolocation API

   • 用于获取用户设备的地理位置信息。

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(position => { 
        console.log(`Latitude is ${position.coords.latitude}`); 
        console.log(`Longitude is ${position.coords.longitude}`); 
}, error => { 
    console.error('Error occurred. Error code: ', error.code); }); 
} else { 
    console.log('Geolocation is not supported by this browser.'); 
}

1. Notification API

   • 用于显示浏览器通知和弹出窗口。

if (Notification.permission === 'granted') { 
    new Notification('Hello, Notification!', { 
    body: 'This is a test notification.' }); 
    } else if (Notification.permission !== 'denied') { 
        Notification.requestPermission().then(permission => { 
        if (permission === 'granted') { 
            new Notification('Hello, Notification!', { body: 'This is a test notification.' }); 
        } 
   }); 
}

1. Canvas API

   • 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式，常用于渲染图表、游戏图形等。

const canvas = document.getElementById('myCanvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'red'; 
ctx.fillRect(0, 0, 150, 75);

1. WebGL API

   • 用于在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，无需使用插件。WebGL（Web Graphics Library）是一种基于 JavaScript 的 3D 图形 API，它允许在网页上绘制高性能的 3D 图形，而无需任何插件。WebGL 利用了现代浏览器中的 GPU 加速功能，可以在 <canvas> 元素中绘制复杂的图形。（稍复杂可忽略吧其实这块是公司有这块业务这玩意才能玩的明白一些）
     • 上下文：WebGL 需要在 <canvas> 元素上创建一个渲染上下文。
     • 着色器：WebGL 使用着色器程序来定义如何绘制图形。着色器分为顶点着色器和片段着色器。
     • 缓冲区：WebGL 使用缓冲区来存储顶点数据和其他属性。
     • 纹理：WebGL 支持纹理映射，可以将图像贴到 3D 模型上。
     • 变换矩阵：WebGL 使用矩阵来变换顶点坐标，实现平移、旋转和缩放等效果 ``

2. Web Audio API

   • 允许开发者在浏览器中处理和操作音频数据，用于创建音乐、应用程序、游戏音效等。

const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
const oscillator = audioCtx.createOscillator(); 
oscillator.connect(audioCtx.destination); 
oscillator.start(); 
oscillator.stop(audioCtx.currentTime + 1);

1. FileReader API

   • 提供了读取用户选择文件的能力，可以读取文件内容并处理。

<input type="file" id="fileInput"> 
<script> 
    document.getElementById('fileInput').addEventListener('change', function(e) { 
        const file = e.target.files[0]; 
        const reader = new FileReader(); 
        reader.onload = function(e) { 
            console.log('File content:', e.target.result); 
        }; 
        reader.readAsText(file); 
    }); 
</script>

1. IndexedDB API

   • 提供了在客户端存储大量结构化数据的能力，支持事务处理。

let db; 
const request = indexedDB.open('myDatabase', 1); 
request.onerror = function(event) { 
    console.log('Database error: '); 
}; 
request.onsuccess = function(event) { 
    db = event.target.result; 
    console.log('Database opened successfully'); 
}; 
request.onupgradeneeded = function(event) { 
    const db = event.target.result; 
    db.createObjectStore('objectStoreName', { keyPath: 'id' }); 
};

1. Web Storage API (localStorage/sessionStorage)

   • 提供了在客户端存储数据的功能，localStorage 存储的数据是持久性的，sessionStorage 在页面会话结束时会被清除。

localStorage.setItem('name', 'John Doe'); 
console.log(localStorage.getItem('name'));

sessionstorage.setItem('name', 'John Doe'); 
console.log(sessionstorage.getItem('name'));

1. Web Workers API

   • 允许在后台线程中运行脚本，避免阻塞用户界面。

// 假设我们需要在一个 Web 应用中执行一个计算密集型任务，例如计算斐波那契数列的一个大数值
// main.js
if (window.Worker) { 
    const worker = new Worker('worker.js'); 
    // 向 worker 发送消息 
    worker.postMessage({ task: 'fibonacci', data: 30 }); 
    // 监听 worker 发回的消息 
    worker.onmessage = function(e) { 
    console.log('Result:', e.data); 
    }; 
    // 当 worker 发生错误时 
    worker.onerror = function(e) { 
       console.error('Worker error:', e); 
    }; 
} else { 
    console.error('Web Workers are not supported in this environment.');
}

// work
self.onmessage = function(e) { 
const task = e.data.task; 
const data = e.data.data; 

let result; 
switch (task) { 
case 'fibonacci': 
    result = fibonacci(data); 
    break; 
default: 
    result = 'Unsupported task'; 
} 
self.postMessage(result); 
}; 
function fibonacci(n) { 
    if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); 
}

1. Blob API

   • Blob API 是一组用于处理二进制数据的 Web API，它允许开发者在客户端上操作二进制数据，如图片、视频、音频文件等。Blob 对象表示一个不可变的、原始数据的类文件对象。Blob 表示的数据不一定是一个JavaScript原生格式。File接口基于Blob，继承了blob功能并将其扩展使其支持用户系统上的文件。

<input type="file" id="fileInput"> 
<img id="preview" src="" alt="File preview"> 
<script> 
// 处理文件上传
// 创建 Blob 对象的基本方法是使用构造函数 `new Blob()`，传入一个包含数据的数组和一个可选的选项对象
-   `size`: Blob 对象的大小，以字节为单位。
-   `type`: Blob 对象的 MIME 类型，默认为 `""`（空字符串）
// const blob = new Blob(['hello, world'], {type: 'text/plain'});
document.getElementById('fileInput').addEventListener('change', function(e) { 
    const file = e.target.files[0]; 
    const url = URL.createObjectURL(file); 
    document.getElementById('preview').src = url; 
}); 

// 生成文件下载链接
const blob = new Blob(['hello, world'], {type: 'text/plain'}); 
const url = URL.createObjectURL(blob); 
const link = document.createElement('a'); 
link.href = url; 
link.download = 'hello.txt'; link.click(); 
URL.revokeObjectURL(url); // 清理工作

// 读取文件内容
const file = new Blob(['hello, world'], {type: 'text/plain'}); 
const reader = new FileReader();
reader.onload = function(e) { 
console.log('File content:', e.target.result); 
}; 
reader.readAsText(file);

// 通过 AJAX 发送 Blob 数据
const blob = new Blob(['hello, world'], {type: 'text/plain'});
const formData = new FormData(); 
formData.append('file', blob, 'hello.txt'); 
fetch('/upload', { method: 'POST', body: formData }).then(response => response.text()) .then(data => console.log('Success:', data)).catch((error) => console.error('Error:', error));
</script>

File API 是 Blob API 的扩展，它允许你处理用户上传的文件。File 对象继承了 Blob 的所有特性，并添加了一些额外的属性，如 lastModified 和 name

<!--读取用户上传的图片并显示-->
<input type="file" id="imageInput"> 
<img id="imagePreview" src="" alt="Image preview"> 
<script> 
// Blob 与 File API 的结合使用
document.getElementById('imageInput').addEventListener('change', function(e) { 
const file = e.target.files[0]; 
const reader = new FileReader();
reader.onload = function(e) { 
document.getElementById('imagePreview').src = e.target.result; 
}; 
reader.readAsDataURL(file); }); 
</script>

1. WeakSet API

   • WeakSet 是 ES6 中引入的一种新的数据结构，它类似于 Set，但是它只存储对象类型的值，并且这些对象是以弱引用的形式存储的。这意味着如果一个对象在 WeakSet 中是唯一的引用，那么当没有其他引用指向这个对象时，它就可以被垃圾回收机制回收（WeakSet 可以帮助避免内存泄漏的问题）

// 创建 WeakSet
const ws = new WeakSet();

// 添加元素
const obj1 = {}; 
ws.add(obj1); // 添加一个空对象到 WeakSet

// 检查元素是否存在
console.log(ws.has(obj1)); // true

// 删除元素
// 创建 WeakSet 
const ws = new WeakSet(); 
// 创建一些对象 
const obj1 = { name: "Alice" }; 
const obj2 = { name: "Bob" }; 
const obj3 = { name: "Charlie" }; 
// 向 WeakSet 中添加对象 
ws.add(obj1); 
ws.add(obj2); 
// 检查对象是否存在于 WeakSet 中 
console.log(ws.has(obj1)); 
// 输出 true 
console.log(ws.has(obj3)); 
// 输出 false 
// 如果没有其他引用指向 obj1，obj1 将会被垃圾回收 
obj1 = null; 
// 在没有其他引用的情况下，obj1 会从 WeakSet 中移除 
// 但是这里无法直接验证，因为 WeakSet 不提供遍历方法

1. Service Worker API

   • 用于创建离线可用的应用程序，并且可以拦截网络请求，实现缓存和更新策略。

// 首先，你需要创建一个 Service Worker 脚本文件。这个脚本会被浏览器用来拦截网络请求，并缓存资源
self.addEventListener('install', function(event) { 
    console.log('[ServiceWorker] Install'); 
    event.waitUntil( 
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([ 
                '/', 
                '/index.html', 
                '/main.js', 
                // 添加更多需要缓存的静态资源路径 
            ]); 
        })
    ); 
}); 

self.addEventListener('activate', function(event) { 
    console.log('[ServiceWorker] Activate'); 
    event.waitUntil( caches.keys().then(function(keyList) { 
        return Promise.all(keyList.map(function(key) {
            if (key !== 'my-cache') { 
                return caches.delete(key); 
            } 
        })); 
    }) 
); 
    return self.clients.claim(); 
}); 

self.addEventListener('fetch', function(event) { 
    console.log('[ServiceWorker] Fetch', event.request.url); 
    event.respondWith( 
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request); 
        }) 
    );
});

// ### 注册 Service Worker
// 在你的 Vue 应用中注册 Service Worker。假设你的 `service-worker.js` 文件位于项目的根目录下，可以在 `main.js` 或者其他合适的初始化文件中添加注册逻辑
if ('serviceWorker' in navigator) { 
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log('Service Worker Registered: ', registration); 
    }, function(err) { 
        console.log('Service Worker Registration Failed: ', err); 
        }); 
    }); 
}

1. IntersectionObserver API
   • IntersectionObserver 是一个非常有用的 API，可以用来优化页面性能，特别是在处理大量动态内容时。通过异步观察元素的可见性变化，可以避免不必要的计算和资源加载，从而提高用户体验。（可以用于检测元素是否进入视口，可以用于实现无限滚动、懒加载等功能）

配置对象三个参数

• threshold：一个数字或数字数组，表示元素与根元素相交的比例。默认值为 [0]，表示只要元素与根元素有任何部分相交即视为相交。
• root：一个 DOM 元素，表示相对于哪个元素观察相交。默认为 null，表示相对于视窗观察。
• rootMargin：一个字符串，表示相对于 root 元素的边缘增加或减少的边界。可以使用像素值或百分比。默认值为 "0px"。

// 创建 `IntersectionObserver` 实例
const observer = new IntersectionObserver( 
(entries, observer) => { 
    entries.forEach(entry => { 
        if (entry.isIntersecting) { 
            console.log('Element is visible:', entry.target); 
        } else {
            console.log('Element is not visible:', entry.target); 
        } 
    }); 
}, 
{ 
    threshold: 0.5 // 当元素至少50%可见时，认为其与根元素相交 
} 
);

// 观察目标元素
const target = document.querySelector('#targetElement'); 
observer.observe(target);

// 停止观察
observer.unobserve(target);

// 销毁观察者
observer.disconnect();

1. requestIdleCallback API
   • requestIdleCallback 是一个浏览器 API，用于在浏览器的空闲时间执行任务。它允许开发者在浏览器处理完当前的高优先级任务后，利用剩余的时间槽来执行一些低优先级的任务。这对于提高用户体验和性能非常有用，因为它可以确保关键任务（如用户交互）不会被低优先级任务干扰（渐进式渲染、资源加载、动画和定时任务、性能优化）通过使用 requestIdleCallback，可以更好地利用浏览器的空闲时间，提高应用的性能和用户体验

IdleDeadline 对象

IdleDeadline 对象提供了关于当前空闲时间段的信息，包括：

• timeRemaining()：返回当前空闲时间段剩余的时间（以毫秒为单位）
• didTimeout：一个布尔值，表示是否超过了浏览器分配给当前 idle callback 的时间

const callback = (deadline) => { 
    console.log('Idle deadline:', deadline); // 执行一些低优先级任务 
};

const id = requestIdleCallback(callback);

// 如果不再需要某个 idle callback，可以使用 `cancelIdleCallback` 来取消它
cancelIdleCallback(id);

前端 Web API 的作用

• 增强用户体验：通过这些 API，开发者可以实现更丰富的交互效果，提高网站的可用性和吸引力。
• 提升功能多样性：借助 Web API，可以实现从前端直接访问设备功能，如摄像头、麦克风等，增加了应用的功能性。
• 改善性能：通过使用如 Service Worker 等 API，可以实现更好的缓存管理，提高加载速度。

这些 API 为前端开发者提供了强大的工具，使得创建复杂的前端应用成为可能。随着 Web 技术的不断发展，新的 API 也在不断推出，为开发者提供了更多的可能性。