本節(jié)書摘來自異步社區(qū)《HTML5實(shí)戰(zhàn)》一書中的第1章，第1.4節(jié)，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號(hào)查看。

1.4 其他API和規(guī)范

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

本節(jié)主要學(xué)習(xí)內(nèi)容

• 地理定位API及其使用方法。
• IndexDB API，以及如何利用它在客戶端構(gòu)建數(shù)據(jù)庫。
• 面向文件的規(guī)范，以及如何利用它將文件保存在用戶的本地文件系統(tǒng)中。
• SVG和WebGL，以及如何利用它們?cè)赪eb中創(chuàng)建高質(zhì)量的矢量圖形和3D動(dòng)畫。
  下面我們就來介紹這些規(guī)范，它們雖然是輔助性質(zhì)的，但作用同樣也很重要。先從地理定位API開始。

1.4.1 地理定位API（Geolocation API）
隨著近年來移動(dòng)設(shè)備的大量涌現(xiàn)，地理定位應(yīng)用也多了起來。現(xiàn)代的智能手機(jī)上攜帶的全球定位系統(tǒng)（GPS）傳感器能夠非常精確地定位用戶的地理位置。即使GPS不可用（如移動(dòng)設(shè)備并不具有GPS傳感器，或者用戶不在衛(wèi)星的掃描范圍內(nèi)），移動(dòng)設(shè)備還可以轉(zhuǎn)而使用其他的位置跟蹤方法，如利用蜂窩網(wǎng)絡(luò)信號(hào)、Wi-Fi信號(hào)或IP地址。

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

第3章會(huì)介紹有關(guān)地理定位API的內(nèi)容，屆時(shí)你將學(xué)會(huì)如何獲取用戶地理位置并在HTML文檔中嵌入地圖，如圖1-15所示。

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

圖1-15 在第3章開發(fā)的應(yīng)用中，加入了能反映用戶當(dāng)前位置的地圖

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

IndexedDB是HTML5家族中相對(duì)較新的成員。除了它之外，還有另外一種被人們推薦的解決方案，Web SQL（結(jié)構(gòu)化查詢語言）。這種規(guī)范定義了一種客戶端關(guān)系型數(shù)據(jù)庫，使用SQL聲明來查詢并操控?cái)?shù)據(jù)。可最后這個(gè)規(guī)范還是被遺棄了，因?yàn)樗胁捎眠@種規(guī)范的瀏覽器都用的是同一種實(shí)現(xiàn)（一種SQLite數(shù)據(jù)庫），而這種情況就違反了WHATWG及W3C的標(biāo)準(zhǔn)化策略：每種特性必須有兩種獨(dú)立的、可互操作的實(shí)現(xiàn)。盡管該規(guī)范被遺棄，但一些瀏覽器還是保留了對(duì)它的支持，這其中就有移動(dòng)Safari和Android上的一些移動(dòng)瀏覽器。目前，瀏覽器對(duì)IndexedDB的支持遲緩不前，所以多數(shù)使用IndexedDB的Web應(yīng)用同時(shí)也把Web SQL當(dāng)做一個(gè)回退方案。

在第5章，你將學(xué)會(huì)如何在任務(wù)管理應(yīng)用中使用IndexedDB（以及Web SQL回退方案）存儲(chǔ)任務(wù)數(shù)據(jù)，如圖1-16所示。

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

圖像說明文字

圖1-16 第5章開發(fā)的應(yīng)用將使用IndexDB來存儲(chǔ)一系列任務(wù)，并允許快速排序與搜索

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

HTML5家族包括了一些與文件有關(guān)的規(guī)范，試圖在Web應(yīng)用中將文件操作變得簡(jiǎn)單。File API可以讓開發(fā)者用JavaScript獲取一個(gè)文件對(duì)象的引用，讀取一些屬性，如名稱、大小以及MIME類型等。可以用文件閱讀器（File Reader）API來讀取文件對(duì)象，既能夠整體讀取也能部分讀取。同樣，也能用文件編輯器（File Writer）API將數(shù)據(jù)輸出為文件。文件系統(tǒng)（File System）API能讓開發(fā)者在客戶端的沙盒封裝化的本地文件系統(tǒng)中操縱文件對(duì)象。這就能把很多與文件相關(guān)的互動(dòng)都放在客戶端執(zhí)行，極大地節(jié)省了服務(wù)器端的加載時(shí)間。過去，把整個(gè)文件都上傳到服務(wù)器端，僅僅因?yàn)榘l(fā)現(xiàn)錯(cuò)誤的MIME類型，就不得不通知用戶文件類型不正確。可想而知，當(dāng)用戶上傳完一個(gè)大文件后，這樣處理是多么糟糕，而我們現(xiàn)在再也不需要這樣做了。

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

圖1-17 第3章所創(chuàng)建的Super HTML5編輯器可以實(shí)現(xiàn)多種文件操作，比如創(chuàng)建新的空白文件，
導(dǎo)入已有文件（通過選擇或拖動(dòng)導(dǎo)入）等。該編輯器將把文件保存在一個(gè)沙盒封裝的本地
文件系統(tǒng)中。在該文件系統(tǒng)中，可以查看、編輯、刪除文件，或者通
過拖放操作，將文件從應(yīng)用導(dǎo)出到計(jì)算機(jī)中

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

在第7章中，我們將創(chuàng)建一個(gè)叫做SVG Aliens的游戲（如圖1-18所示），學(xué)習(xí)如何使用SVG來創(chuàng)建一些形狀及復(fù)雜對(duì)象，實(shí)現(xiàn)碰撞偵測(cè)，了解SVG相比于canvas元素的優(yōu)缺點(diǎn)。

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

圖1-18 SVG Aliens游戲的畫面。本書后面章節(jié)講述如何完整地開發(fā)這個(gè)游戲

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

在第9章，我們將學(xué)習(xí)WebGL API與3D圖形編程，通過創(chuàng)建一個(gè)簡(jiǎn)單的全3D游戲Geometry Destroyer，來了解創(chuàng)建shader，利用緩沖來處理數(shù)據(jù)，以及通過矩陣運(yùn)算將3D數(shù)據(jù)轉(zhuǎn)變?yōu)槠聊簧系膱D形等內(nèi)容。該游戲畫面如圖1-19所示。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。