本節書摘來自異步社區《HTML5實戰》一書中的第1章，第1.4節，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

1.4 其他API和規范

如前所述，HTML5技術并不僅限于HTML5規范本身，還有大量的其他技術和規范，定義了很多新的功能。現在，很多瀏覽器廠商都在他們最新版的產品中穩步實現著這些功能，這其中包括地理定位API、IndexDB API、文件閱讀器、文件編輯器、File System API，以及SVG和WebGL。

本節主要學習內容

• 地理定位API及其使用方法。
• IndexDB API，以及如何利用它在客戶端構建數據庫。
• 面向文件的規范，以及如何利用它將文件保存在用戶的本地文件系統中。
• SVG和WebGL，以及如何利用它們在Web中創建高質量的矢量圖形和3D動畫。
  下面我們就來介紹這些規范，它們雖然是輔助性質的，但作用同樣也很重要。先從地理定位API開始。

1.4.1 地理定位API（Geolocation API）
隨著近年來移動設備的大量涌現，地理定位應用也多了起來?，F代的智能手機上攜帶的全球定位系統（GPS）傳感器能夠非常精確地定位用戶的地理位置。即使GPS不可用（如移動設備并不具有GPS傳感器，或者用戶不在衛星的掃描范圍內），移動設備還可以轉而使用其他的位置跟蹤方法，如利用蜂窩網絡信號、Wi-Fi信號或IP地址。

地理定位API中定義的方法能使Web應用確定用戶的地理位置。當調用這些方法時，瀏覽器就會通知用戶，應用正在請求訪問他們的位置。用戶可以選擇接受或拒絕這種請求，從而確保應用不會未經許可就跟蹤他們的位置。如果用戶接受了請求，地理定位API就會向應用提交一系列有關用戶位置的數據，其中包括了用戶的地理坐標位置（經緯度）、海拔高度、航向、速度，以及結果的精確度等信息。

第3章會介紹有關地理定位API的內容，屆時你將學會如何獲取用戶地理位置并在HTML文檔中嵌入地圖，如圖1-15所示。

https://yqfile.alicdn.com/fb51e89bb1115f82ff414f26274ba2aee6e1d3b7.png
" >

圖1-15 在第3章開發的應用中，加入了能反映用戶當前位置的地圖

1.4.2 索引數據庫API（IndexedDB API）
IndexedDB API可以讓開發者把復雜數據結構存放在完整的客戶端數據庫中。與Web Storage API相比，IndexedDB API的重大改進在于：在Web Storage API中，唯一的索引是鍵/值對的鍵，而在IndexedDB API中，值也完全可以被索引了。從而為需要搜索或過濾數據的應用提供了一種比較可行的解決方案。不過，IndexedDB API更為復雜，一開始很難掌握。

IndexedDB是HTML5家族中相對較新的成員。除了它之外，還有另外一種被人們推薦的解決方案，Web SQL（結構化查詢語言）。這種規范定義了一種客戶端關系型數據庫，使用SQL聲明來查詢并操控數據?？勺詈筮@個規范還是被遺棄了，因為所有采用這種規范的瀏覽器都用的是同一種實現（一種SQLite數據庫），而這種情況就違反了WHATWG及W3C的標準化策略：每種特性必須有兩種獨立的、可互操作的實現。盡管該規范被遺棄，但一些瀏覽器還是保留了對它的支持，這其中就有移動Safari和Android上的一些移動瀏覽器。目前，瀏覽器對IndexedDB的支持遲緩不前，所以多數使用IndexedDB的Web應用同時也把Web SQL當做一個回退方案。

在第5章，你將學會如何在任務管理應用中使用IndexedDB（以及Web SQL回退方案）存儲任務數據，如圖1-16所示。

https://yqfile.alicdn.com/b91caed41bc22832b5d6ede2c441431075fcacd4.png" >

圖像說明文字

圖1-16 第5章開發的應用將使用IndexDB來存儲一系列任務，并允許快速排序與搜索

1.4.3 文件API、文件閱讀器API、文件編輯器API與文件系統API
在Web應用中處理文件向來是個難題。唯一能讓用戶選擇本地計算機文件的原生方法是使用文件輸入類型，而這也非常麻煩，特別當遇到調整Web小部件的UI樣式時，情況尤其如此。當用戶選擇文件時，應用不得不把整個文件都上傳到服務器端，以便進行處理。雖然可以利用基于Flash和Java的方案來實現更好的功能，但由于需要安裝第三方插件，所以也不算是理想的解決方案。

HTML5家族包括了一些與文件有關的規范，試圖在Web應用中將文件操作變得簡單。File API可以讓開發者用JavaScript獲取一個文件對象的引用，讀取一些屬性，如名稱、大小以及MIME類型等?？梢杂梦募喿x器（File Reader）API來讀取文件對象，既能夠整體讀取也能部分讀取。同樣，也能用文件編輯器（File Writer）API將數據輸出為文件。文件系統（File System）API能讓開發者在客戶端的沙盒封裝化的本地文件系統中操縱文件對象。這就能把很多與文件相關的互動都放在客戶端執行，極大地節省了服務器端的加載時間。過去，把整個文件都上傳到服務器端，僅僅因為發現錯誤的MIME類型，就不得不通知用戶文件類型不正確。可想而知，當用戶上傳完一個大文件后，這樣處理是多么糟糕，而我們現在再也不需要這樣做了。

你可以使用所有的API來提供一個完整的本地文件系統。第3章將介紹HTML文件到底存在何處。圖1-17展示出應該如何使用一些功能。

圖1-17 第3章所創建的Super HTML5編輯器可以實現多種文件操作，比如創建新的空白文件，
導入已有文件（通過選擇或拖動導入）等。該編輯器將把文件保存在一個沙盒封裝的本地
文件系統中。在該文件系統中，可以查看、編輯、刪除文件，或者通
過拖放操作，將文件從應用導出到計算機中

1.4.4 可伸縮矢量圖形
可伸縮矢量圖形（Scalable Vector Graphics，SVG）是一種XML語言，它可以讓你使用HTML標記來創建效果驚人的矢量圖形，不僅可以利用CSS進行樣式編排，并且還能使用JavaScript借助DOM元素進行交互。位圖圖形的一個主要問題在于，按比例放大其尺寸后，圖像質量會降級，產生“像素化”效果。矢量圖形則是基于數學公式構建而成，而非由一個個像素點構成，所以即使放大后也能看起來十分美觀。

在第7章中，我們將創建一個叫做SVG Aliens的游戲（如圖1-18所示），學習如何使用SVG來創建一些形狀及復雜對象，實現碰撞偵測，了解SVG相比于canvas元素的優缺點。

https://yqfile.alicdn.com/3fe80f76da8d0b6cbcbf9dc79c2d3a0255f82a98.png" >

圖1-18 SVG Aliens游戲的畫面。本書后面章節講述如何完整地開發這個游戲

1.4.5 Web Graphics Library
最后再介紹一下Web Graphics Library（WebGL），這是一個利用canvas元素來創建3D圖形的JavaScript API。它基于Open Graphics Library for Embedded Systems（OpenGL ES）標準，這項標準針對包括手機在內的嵌入式設備而設計了一套3D現實方案。借由它所提供的API，開發者可以使用著色器（shader）、緩沖以及繪圖方法來實現圖形硬件底層控制。

在第9章，我們將學習WebGL API與3D圖形編程，通過創建一個簡單的全3D游戲Geometry Destroyer，來了解創建shader，利用緩沖來處理數據，以及通過矩陣運算將3D數據轉變為屏幕上的圖形等內容。該游戲畫面如圖1-19所示。

總結

以上是生活随笔為你收集整理的《HTML5实战》——1.4 其他API和规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。