1. 介紹
WebWorker 允許開發者在Web上建立多線程，對于計算密集型操作，可以大大優化web應用性能。
但是WebWorker文檔中隻介紹了 是由url來建立一個worker，使用webpack時使用worker-loader 時，通過
inline: true
的選項可以建立一個内聯worker。
如果不使用webpack或worker-loader時應該怎麼操作呢？
答案是通過Blob，worker-loader也是這麼做的。
2. 代碼示例
Blob 對象表示一個不可變、原始資料的類檔案對象。大概意思就是 Blob就相當是浏覽器上的檔案，可以通過 blob生成一個js檔案，再給Worker加載，上代碼：
let code = /*javascript*/`
this.addEventListener('message', function (e) {
this.postMessage('You said: ' + e.data);
}, false);
`
function codeToBlob (code) {
let blob = new Blob([code], {type: 'text/javascript'}); // 生成js檔案對象
let objectURL = window.URL.createObjectURL(blob); // 生成js檔案的url
return objectURL;
}
let worker = new Worker(codeToBlob(code)); // 使用 blob對象的url
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
}
worker.postMessage('Work done!');
把上面這段代碼複制到f12控制台運作，你就可以得到Worker傳回的消息了
不過有的站點做了安全攔截就不行，比如npmjs.com
當然如果是部署在你自己的站點那就肯定沒有這個問題啦！
3. 解讀
看看上面這一段代碼，其實很簡單的，blob就有這麼強大，讓你可以在web上憑空生成一個檔案，除此之外，通過這個騷操作你還可以實作 web 下載下傳檔案，不通過
eval
或者
new Function
來執行js代碼，我們一一來示範一下：
示範之前，對我們上面例子優化一下，就是code這裡不能js代碼高亮，在vscode裡我們隻需要下載下傳一個
es6-string-javascript
插件就然後再es6字元串前面加上
字首就可以了，體驗相當的好！
4.通過Blob下載下傳檔案
一般下載下傳檔案都是通過
a标簽
加一個
download屬性
來下載下傳一個url對應的檔案：
這樣就能下載下傳一個 xxx.js 檔案了，但是我如果想通過一段代碼字元串來生成一個js檔案并且下載下傳呢？
還得通過Blob，還是先上代碼：
function download (code, name) {
let downloadLink = document.createElement('a');
downloadLink.setAttribute('style', 'position: fixed;top: -100px');
document.body.appendChild(downloadLink);
downloadLink.setAttribute('download', name);
let blob = new Blob([code], {type: 'text/javascript'});
let url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.click();
document.body.removeChild(downloadLink);
}
download('console.log("Hello World");', 'hello.js');
把上面的代碼放到f12，控制台運作你就可以自動下載下傳一個 hello.js 檔案了，舉一反三，你可以通過這種方式下載下傳任何檔案…
5.通過Blob執行js代碼
這也是一個比較常見的場景，執行一段js代碼，一般我們可以使用
eval
和
new Function
，我們使用Blob看看如何執行js代碼
function exeJs (code) {
let blob = new Blob([code], {type: 'text/javascript'});
let objectURL = window.URL.createObjectURL(blob);
script = document.createElement('script');
script.onload = () => {
console.log('loaded')
};
script.src = objectURL;
document.body.appendChild(script);
}
exeJs('console.log("hello world");')
運作結果：
實作方式大同小異，就不一一解釋了。
以上就是總結的一些 Blob 使用場景，謝謝閱讀！