H5新特性分享

08-16

H5新特性分享

4 人贊了文章最近面試過程中總被問及H5玩的怎麼樣，對它的新特性了解多少？用過哪些？本人菜鳥一枚（騎驢奔跑的挨踢路上的大水牛）。雖然H5早在去年就已經有完備的規範版本出來，但是因為變革性的更新，目前大部分主流瀏覽器本沒有完全支持或完善，在中端領域的使用也尚未完全普及；個人對H5的研究也並沒有升入透徹，因此面對這個問題時期初還是一臉懵逼。。。。收集相關資料以便分享討論：

究竟H5有哪些方面的變動？

相比於以往的版本，h5有個革命性的變動，h5已經不再注重於web內容，而是拓展至一個平台，新增了極其豐富的新標籤、強大便捷的API（特別是移動互聯網元素）、以及HTML聲明與標籤簡化；在兼容性方面也比以往提升非常大。

新增的標籤？

語義結構類

header、hgroup、nav、datalist、section、article、aside、footer等等，將以往div無語義化的結構化進行優化，是html標籤的語義化得到明顯提升。

智能化的表單

<input type=email … 限制用戶輸入email格式

<input type=url … 限制用戶輸入網址格式

<input type=date … 限制用戶輸入日期格式

<input type=time … 限制用戶輸入時間格式

<input type=month … 限制用戶輸入月份格式

<input type=week … 限制用戶輸入周格式

<input type=number … 限制用戶輸入數字格式

<input type=range … 一個滑動條效果

<input type=search … 搜索格式 results="n"

<input type=color … 選擇顏色格式

這些智能化的標籤可以省略極其繁雜的正則驗證、渲染格式；而已可以行內定義pattern表達式、required必填項、autofocus自動聚焦

新增API

一等公民多媒體

h5新晉一等公民audio、video多媒體的推出，也加快了flash退出瀏覽器舞台的步伐。

<video src="movie.mp4" controls="controls"> </video>

<audio src=「aud.mp3」 autoplay=「true」 controls=「true」></audio>

本地存儲

本地存儲是由cookie衍生的，目的是在瀏覽器本地預留一個較大的空間進行存儲數據緩存等，對優化網站性能有很大幫助，本地存儲分為session storage和local storage 。手機端由於local的存在能節約大量流量和載入速度，不再重複載入請求。而且local自帶了setItem() getItem() remove() clear()等方法，使用起來極其方便，但是緩存需要手動清除，否則永久存在，空間大小約為5MB；session則只會在當前會話頁面存在，會隨著頁面的關閉而銷毀，用法和local一樣。

定位（只能用於移動端）

geolocation定位,geolocation具有getCurrentPosition() watchPosition() clearWatch()方法

navigator.geolocation.getCurrentPosition( function(p) { var map="維度"+p.coords.latitude+"經度"+p.coords.longitude; alert(var); });

變革性的web socket

這個東西是我從面試過程中了解到的，當時面試官提問目前除了通過ajax的請求模式實現後台前端的數據交互，有沒有一種其他方式實現後台數據更新自動推送到前端界面？按目前我們常規的操作是，如果需要監聽後台數據變動並及時渲染給用戶界面，採用的是輪詢模式，但是這樣會造成伺服器壓力和流量浪費。web socket就是為了解決這一尷尬情況提出的，雖然這一技術還是在草案階段，但是前景不言而預。web socket是一種基於TCP的協議。

history對象

history並不是h5新增的對象，h5是在原有的基礎上給它加了兩個新方（原有go() back() forward()）---history.pushState(data，title[null,url])和history.replaceState(data，title[null,url])

【data:一個表示狀態的對象，json格式數據title：一個string格式的標題（大多數瀏覽器不支持或忽略這個參數，最好用null代替）url：一個url（用於替換當前URL）】

2D繪圖canvas

巧妙運用canvas結合css3新增的動畫transition transform animation屬性，能實現各種圖畫效果，以及3D視圖，大部分頁游也是基於此開發的。

以上是個人的收集和分享，第一次寫博文，純手打，很多不足，望多指正，一起討論··！