H5新增的API


本地存儲

sessionStorage、localStorage

File API

H5在DOM中為文件輸入元素添加了一個files集合,在選擇了一或多個文件時,files集合中將包含一組File對象,每個File對象對應着一個文件。每個File對象都有下列只讀屬性:

name: 本地文件系統的文件名;
size: 文件的字節大小;
type:字符串,文件的MIME類型;
lastModifiedDate:字符串,文件上一次被修改的事件(只有chrome實現了這個屬性);

FlieReader

FlieReader類型實現的是一種 異步文件讀取機制。可以把FileReader想象成XMLHttpRequest,區別只是它讀取的是本地文件,而不是遠程服務器。為了讀取文件中的數據,FileReader提供了如下幾個方法:
readAsText(file, encoding):方法可以將  Blob 或者  File  對象轉根據特殊的編碼格式轉化為內容(字符串形式);
readAsDataURL(file):可以獲取一段data:base64的字符串;
readAsArrayBuffer(file):讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中;
由於讀取過程是異步的,因此FileReader也提供了幾個事件。其中最有用的三個事件是progress、error和load,分別表示是否又讀取了新數據,是否發生了錯誤以及是否讀完了整個文件。

對象URL

objectURL = URL.createObjectURL(object);

object是用於創建 URL 的 File 對象、Blob 對象或者 MediaSource 對象;

返回值一個指向object的帶hash的url字符串,這個URL的生命僅存在於它被創建的這個文檔里;、

可以實現本地的圖片預覽

Web Worker

專用Web Worker提供可一個簡單的方法使的web內容能夠在后台運行腳本。一旦worker創建后,它可以向由它的創建者指定的事件監聽函數傳遞消息,這樣改worker生成的所有任務就都會接收到這個消息。 worker線程能夠在不干擾UI的情況下執行任務

創建一個新的worker十分簡單。就是調用Worker()構造函數,指定一個要在worker線程內運行的腳本的URI,如果希望能夠收到worker的通知,可以將worker的onmessage屬性設置成一個特定的事件處理函數,如果希望能夠發送信息到worker,可以使用postmessage方法。
 
關於Web Worker,最重要的是要知道它所執行的JavaScript代碼完全在另一個作用域,與當前網頁中的代碼不共享作用域。在Web Worker中,同樣有一個全局對象和其他對象以及方法。但是Web Worker中的代碼不能訪問DOM,也無法通過任何方式影響頁面的外觀。 Web Worker中的全局對象是worker對象本身。

history對象

h5中的history對象新增了兩個新方法:history.pushState()和history.replaeState(); 兩種方法都允許我們添加和更新歷史記錄,它們的工作原理相同並且可以添加數量相同的參數。但是pushState()是在history棧中添加一個新的條目,replaceState()是替換當前的記錄值。除了這兩個方法之外,還有popstate 事件可以監聽URL的改變。

cancas和svg

 

原文:https://www.jianshu.com/p/85e04dbb76b6


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM