Javascript:Blobベース

参考資料Blob An Introduction To JavaScript Blobs and File Interface JavaScript ArayBuffers And Type Arays MIME type FileReader
一、Blob略述
Blobオブジェクトは、ファイルデータを保存するバイトのセグメントを表すクラスのファイルオブジェクトである.本当のファイルを引用したわけではないですが、自分のsizeとMIME typeがあります.ファイルと同じです.Blobオブジェクトは、自身のサイズやブラウザによってメモリやファイルシステムに保存されます.ファイルを使うように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!')