近來研究點對點的文件傳輸，想到一種方案FileReader+WebRtc。
當我看到FileReader的時候，哎呀，不錯的東西啊，仔細一看屬於File API，或者叫做Web API。
File API 官方的文檔 File API
MDN的Web APIs|MDN
MDN的 web引用中使用文件
其主要由，FileList,Blob,File,FileReader等組成。
這里我們主要探討一下FileReader,先看看官方網站的接口定義
[Constructor, Exposed=Window,Worker] interface FileReader: EventTarget { // async read methods void readAsArrayBuffer(Blob blob); void readAsText(Blob blob, optional DOMString label); void readAsDataURL(Blob blob); void abort(); // states const unsigned short EMPTY = 0; const unsigned short LOADING = 1; const unsigned short DONE = 2; readonly attribute unsigned short readyState; // File or Blob data readonly attribute (DOMString or ArrayBuffer)? result; readonly attribute DOMError? error; // event handler attributes attribute EventHandler onloadstart; attribute EventHandler onprogress; attribute EventHandler onload; attribute EventHandler onabort; attribute EventHandler onerror; attribute EventHandler onloadend; };
首先可以看出來，他繼承的是EventTarget，這說明什么，哈哈，下面是主要的屬性，方法，事件，最好是參考官網API文檔。
主要的屬性
readySate:狀態，對應三個枚舉值，EMPTY,LOADING,DONE
result : 讀取完畢后的內容，一般onload后調用。
error: 錯誤，NotFoundError,SecurityError,NotReadableError
主要方法：
readAsArrayBuffer:
readAsText：
readAsDataUrl:
主要事件：
onloadstart:准備就緒，開始讀取
onprogress:在讀取或者解碼
onload:讀取完畢
onbort:終止，例如調用abort方法
onerror:發生錯誤
onloadend:讀操作完畢，不管是讀取成功還是失敗
我就不多說，今天演練的是readAsText，我想到的場景就是在線文本比較，在線JSON格式化，在線文本編輯。
來吧，少年，在線JSON格式化，50行代碼做個demo。
源碼路徑：https://github.com/xiangwenhu/BlogCodes
html代碼：
<!DOCTYPE> <html> <head> <title>FileReader 之 readAsText</title> </head> <body style="margin: 2rem auto"> <div id="container" style="margin-left: 5rem"> <input type="file" id="file" onchange="handleFiles(this.files)" /> <div id="results"></div> </div> </body> <script src="js/readAsText.js"></script> </html>
js代碼：
function handleFiles(files) { if (files.length) { let file = files[0], reader = new FileReader() reader.onload = () => { (new JSONParser(reader.result, '#results')).init() } reader.readAsText(file) } } class JSONParser { constructor(source, selector) { this.source = source this.selector = selector this.results = [] this.deep = 0 } init() { try { let json = JSON.parse(this.source) this.format(undefined, json) document.querySelector(this.selector).innerHTML = this.results.join('<br/>') } catch (e) { alert(e) } } format(key = '', value) { if (value instanceof Array) { this.results.push(this.generateLine(key, '[')) this.deep++ value.forEach((v, i) => { this.format(i, v) }) this.deep-- this.results.push(this.generateLine(undefined, ']')) } else if (value && typeof value == 'object') { this.results.push(this.generateLine(key, '{')) Object.keys(value).forEach(k => { this.deep++ this.format(k, value[k]) this.deep-- }) this.results.push(this.generateLine(undefined, '}')) } else { this.results.push(this.generateLine(key, value)) } } generateLine(key, value) { let k = key === undefined || key === '' ? '' : `${key}:`, v = value === null ? 'null' : value return ' '.repeat(this.deep) + `${k}${v}` } }
效果：
