Javascript：Blob基础

参考资料
Blob
An Introduction To JavaScript Blobs and File Interface
JavaScript ArrayBuffers And Typed Arrays
MIME type
FileReader

一、Blob简述

Blob对象是类文件对象，它表示保存文件数据的字节片段。它并不是真的引用了一个真实的文件，但它有自己的size和MIME type，跟文件一样。
Blob对象根据自身size的大小和浏览器的不同，会被存储在内存或者文件系统中，我们可以像使用文件一样来使用一个blob。

二、创建一个Blob

// 第一个参数是一个数组，数组中还可以嵌套数组
// 第二个参数是一个对象，该对象中可以指定blob的MIME类型等，可以省略
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"})

要从blob中读取数据，需要用到 FileReader.

var myBlob = new Blob(["This is my blob content"], {type : "text/plain"})
var myReader = new FileReader()
// 监听“loadend”事件，函数将在reader读取完blob中的数据之后发生
myReader.addEventListener("loadend", function(e){
    document.getElementById("paragraph").innerHTML = e.srcElement.result
})
// 开始读取数据，该方法表示读取的数据存储为字符串形式
myReader.readAsText(myBlob);

三、Blob URLs

如果用浏览器打开本地文件，你会发现 url 是以 “file://“ 开头的， 一个 file:// URL 引用了本地文件系统中的一个真实文件。
类似的，一个 blob:// URL 指向一个Blob对象。
几乎所有可以使用 urls 的地方都可以使用 blob:// URLs。
我们需要用createObjectURL对象来为一个blob创建一个url。

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

var link = document.createElement('link')
link.rel = 'stylesheet'
// createObjectURL 返回一个字符串形式的 blob URL
link.href = window.URL.createObjectURL(blob)
document.body.appendChild(link)

因而我们可以利用这个来创建内联的Web Worker：

// 把这个blob看成一个js文件
// 该blob的内容为创建的worker的代码
var blob = new Blob([ "onmessage = function(e) { postMessage('msg from worker'); }"])
// 创建一个url指向该blob
var blobURL = window.URL.createObjectURL(blob)
var worker = new Worker(blobURL) // 创建一个worker，Worker接受一个url作为参数
worker.onmessage = function (e) {
    console.log(e.data)
}
worker.postMessage('inline worker!')