🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
啊！！！Blob 居然這麼強大！
在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。
Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻流、離線緩存、甚至 Service Worker 中的響應緩存……這些場景中，Blob 都在默默發揮着作用。
今天，就讓我們揭開 Blob 的神秘面紗，看看它到底有多強大。
一、Blob 是什麼？
從字面上看，Blob 是“二進制大對象”的意思。在 JavaScript 中，Blob 對象表示一個不可變的、原始數據的類文件對象。它不一定是文本，可以是圖片、音頻、視頻、JSON、甚至任意二進制數據。
創建一個 Blob 非常簡單：
const blob = new Blob(['Hello, Blob!'], { type: 'text/plain' });
你可以傳入字符串、ArrayBuffer、BufferSource、甚至其他 Blob，再指定 MIME 類型，就可以創建一個 Blob。
二、Blob 的“超能力”有哪些？
1. 直接生成文件下載
你是否還在用 a 標籤配合 download 屬性實現下載？試試 Blob 吧！
const blob = new Blob(['這是一段文本內容'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();
URL.revokeObjectURL(url); // 釋放內存
這樣你就可以動態生成文件並觸發下載，無需服務器參與。非常適合前端導出日誌、配置文件、甚至代碼片段。
2. 作為文件上傳的橋樑
上傳文件時，我們通常使用 File 對象，而 File 是 Blob 的子類。這意味着你完全可以用 Blob 構造上傳內容。
const blob = new Blob(['{"name": "Blob"}'], { type: 'application/json' });
const file = new File([blob], 'data.json', { type: 'application/json' });
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
});
你甚至可以在上傳前對數據進行加密、壓縮、拼接，Blob 就是你的“原材料”。
3. 在 Service Worker 中緩存響應
Service Worker 是 PWA 的核心，而緩存響應時，Blob 也是常客。
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) return response;
return fetch(event.request).then(fetchResponse => {
// 假設是圖片
return fetchResponse.blob().then(blob => {
caches.open('image-cache').then(cache => {
cache.put(event.request, new Response(blob));
});
return new Response(blob);
});
});
})
);
});
通過 Blob 緩存資源，可以實現更靈活的緩存策略，甚至跨頁面共享。
4. 在 Web Worker 中處理大文件
Web Worker 是處理耗時任務的好幫手。Blob 可以被結構化克隆，因此可以安全地在主線程和 Worker 之間傳遞。
// main.js
const worker = new Worker('worker.js');
const blob = new Blob(['大量數據...'], { type: 'text/plain' });
worker.postMessage(blob);
// worker.js
onmessage = function(e) {
const blob = e.data;
const reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
};
reader.readAsText(blob);
};
這種模式非常適合處理大型文件，比如壓縮、解壓、加密、解析等操作。
三、Blob + URL.createObjectURL：前端資源的“虛擬路徑”
有時候，我們需要在前端生成一個“臨時鏈接”來引用資源，比如預覽圖片、播放音頻、嵌入 PDF 等。
const blob = new Blob(['PDF內容...'], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
iframe.src = url;
這種方式不需要將文件上傳到服務器，也不需要使用 base64 編碼，節省內存，性能更優。
四、Blob 的侷限與注意事項
雖然 Blob 很強大，但也有一些需要注意的地方：
- 不可變性：Blob 是隻讀的，一旦創建，內容不能修改。
- 不能直接讀取內容：需要配合
FileReader或Response來讀取。 - 內存管理：使用完
URL.createObjectURL後要記得調用URL.revokeObjectURL()，否則會造成內存泄漏。 - 兼容性：現代瀏覽器支持良好，但在某些老舊設備上仍需注意。
五、結語：Blob 是前端的“瑞士軍刀”
Blob 不是一個炫酷的技術，但它卻是一個極其實用、靈活、不可或缺的工具。它連接了前端數據處理的多個維度：文件、網絡、緩存、Worker、甚至 DOM 操作。
在現代 Web 開發中，理解並熟練使用 Blob，不僅能提升開發效率，還能幫助你寫出更優雅、更健壯的代碼。
所以，下次當你需要處理文件、緩存資源、生成下載、甚至構建離線應用時，別忘了：Blob 居然這麼強大！
