Don' 不要建構 blob,建構 blob

Eric Bidelman

預告「BlobBuilder」的所有粉絲,再見!

BlobBuilder 是一個方便的 API,可讓您在 JavaScript 中建立 Blob (或檔案)。已自 Chrome 8、FF 6 及 IE 10 推出,但從未在 Safari 中運送,這極有可能改變。File API 的近期規格變更包含 Blob 的新建構函式,基本上讓 BlobBuilder 不相關。事實上,Safari 夜晚已停用此功能,Chrome 很快就會開始在控制台中發出警告。

為進行比較,以下為使用已淘汰 BlobBuilder 和新的 Blob 建構函式的相同程式碼。這段程式碼會建立樣式表,然後附加到 DOM。

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                        window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

Blob():

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

非常好!現在,我們可以直接從資料部分陣列建立 Blob,而不必附加至 BlobBuilder。資料部分可以是不同的類型 (DOMStringArrayBufferBlob),也能以任何順序排列。例如:

var blob = new Blob(['1234567890', blob, arrayBuffer]);

另請注意,第二個物件參數為選用。如要進一步瞭解這些變更,請參閱 Blob 的 MDN 文件