HTML5新特性概述(下)

時間 2019-11-05

標籤 html5 html 特性概述欄目 HTML5 简体版

原文原文鏈接

本篇的html5新特性是下篇，將把html5上篇沒有介紹到的新特性分享出來，OK，下面是正文：javascript

1. 拖放（Drag 和 drop）

拖放是html5提供一個新的特性，這個特性增長了拖拽事件的api,和定義能夠拖拽的屬性。舉個例子，在h5以前實現拖拽功能，其實用的是一種模擬方式，鼠標onmousedown時，獲取當前的一些信息，而後在onmousemove時不斷更新推拽對象的left和top值，最後在onmouseup時對推拽對象完全賦值，並進行釋放後一系列的程序操做。如今h5出來後呢，不在須要模擬了，由於它已經有標準的事件api了，下面看例子： `css

<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>

<div id="draggable" class="draggable" draggable="true">
		draggable
</div>

        var dragEl = document.getElementById('draggable');
        var l = null, t = null;
		
		dragEl.ondragstart = function (e) { // 準備推拽時
			l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;			
		}

		dragEl.ondrag = function (e) {  // 拖拽進行時
			var x = e.clientX, y = e.clientY;				
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
			console.log(x, y, l , t)
		}
		
		dragEl.ondragend = function (e) {   // 拖拽結束時
			var x = e.clientX, y = e.clientY;			
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
		}
複製代碼

`html

注意：拖拽對象必須把draggable屬性設置爲true，其餘開發思惟其實和之前同樣的，沒有多大差異，只是多了更多的監聽事件而已，想要詳細瞭解拖拽的同窗能夠去拖放API查看。html5

2. 地理定位

地理定位這個特性，故名思意，就是獲取用戶位置信息的。經過getCurrentPosition()獲取一系列定位信息，getCurrentPosition()有兩個回調函數參數，獲取地理位置成功的回調和失敗的回調。java

`git

navigator.geolocation.getCurrentPosition(successPos)
function successPos (pos){
	console.log('用戶定位數據獲取成功')
	//console.log(arguments);
	console.log('定位時間：',pos.timestamp)
	console.log('經度：',pos.coords.longitude)
	console.log('緯度：',pos.coords.latitude)
	console.log('海拔：',pos.coords.altitude)
	console.log('速度：',pos.coords.speed)
複製代碼

}` 想了解關於更多的地理位置特性的信息能夠移步到HTML5 地理定位去查看哦。web

3. 離線存儲

HTML5，經過建立 cache manifest 文件，能夠建立 web 應用的離線版本。若是要啓用應用程序緩存，必須在文檔的 <html> 標籤中包含 manifest 屬性：每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。 manifest 文件的建議的文件擴展名是：".appcache".請注意，manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置api

manifest 文件可分爲三個部分：瀏覽器

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

下面是個完整的manifest文件： `緩存

CACHE MANIFEST
2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
複製代碼

` 離線存儲這個功能，通俗的講，其實就是把web的資源文件存儲起來，我的以爲移動端的應用效果會更好一些，畢竟流量貴呀，把一些文件存儲起來，這樣能夠大大的節省流量和服務器的壓力，固然一樣更多的知識點夥伴們去官網查看吧HTML 5 應用程序緩存。

4. Web 存儲

若是說離線存儲是對web的資源文件存儲，那麼web 存儲就是對應用程序裏的數據作存儲了。web存儲提供了兩個存儲方式:

localStorage,沒有時間限制的數據存儲
sessionStorage,就是網頁尚未關閉的狀況下的存儲，網頁窗口關閉，則數據銷燬。

在以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

localStorage.setItem('key', 'val') // 存儲數據

localStorage.getItem('key') // 取數據

localStorage.removeItem('key') // 刪除數據

localStorage.clear() // 刪除全部數據

localStorage.key(index) // 獲取某個索引數據的

sessionStorage.setItem('key', 'val') // 存儲數據

sessionStorage.getItem('key') // 取數據

sessionStorage.removeItem('key') // 刪除數據 `

注意：localStorage和sessionStorage存儲的數據都是字符串類型的數據，取出來的數據也是字符串類型，所以若是存儲的對象不是字符串，則要轉換成字符串數據類型

5. WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。

WebSocket 屬性

Socket.readyState 只讀屬性,表示鏈接狀態：0 - 表示鏈接還沒有創建，1 - 表示鏈接已創建，能夠進行通訊，2 - 表示鏈接正在進行關閉，3 - 表示鏈接已經關閉或者鏈接不能打開。
Socket.bufferedAmount 只讀屬性,已被 send() 放入正在隊列中等待傳輸，可是尚未發出的 UTF-8 文本字節數。

WebSocket 事件

Socket.onopen 鏈接創建時觸發
Socket.onmessage 客戶端接收服務端數據時觸發
Socket.onerror 通訊發生錯誤時觸發
Socket.onclose 鏈接關閉時觸發

例子：`

function WebSocketTest()
     {
        if ("WebSocket" in window)
        {
           alert("您的瀏覽器支持 WebSocket!");
           
           // 打開一個 web socket
           var ws = new WebSocket("ws://localhost:9998/echo");
            
           ws.onopen = function()
           {
              // Web Socket 已鏈接上，使用 send() 方法發送數據
              ws.send("發送數據");
              alert("數據發送中...");
           };
            
           ws.onmessage = function (evt) 
           { 
              var received_msg = evt.data;
              alert("數據已接收...");
           };
            
           ws.onclose = function()
           { 
              // 關閉 websocket
              alert("鏈接已關閉..."); 
           };
        }
        
        else
        {
           // 瀏覽器不支持 WebSocket
           alert("您的瀏覽器不支持 WebSocket!");
        }
     }
     
     WebSocketTest()
複製代碼

` 關於更多的WebSocket你們就去HTML5 WebSocket瞭解吧。

6. Web Workers

web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。關於web worker的應用大概分爲三個部分：

一. 建立 web worker 文件，worker文件是一個單獨的js文件，寫好邏輯後，經過postMessage()方法吧數據發送出去
二. 調用頁面建立worker對象，var w = new Worker("worker文件路徑").而後經過實例對象調用onmessage事件進行監聽，並獲取worker文件裏返回的數據
三.終止web worker，當咱們的web worker建立後會持續的監聽它，須要停止的時候則使用實例上的方法w.terminate()。

下面是個簡單的 web worker文件 `

// 這是一個單獨的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把數據發送出去
setTimeout("timedCount()",500);
}
timedCount();
複製代碼

` 在html頁面調用worker文件，並建立worker對象

<div>計數器: <output id="result"></output></div>
<button onclick="startWorker()">開始Worker</button>
<button onclick="stopWorker()">中止Worker</button>

var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("worker.js");    // 建立worker實例對象
    }
  w.onmessage = function (event) {  // 經過onmessage事件接收數據
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();  // 中止worker任務
}
複製代碼

` 注意：因爲Worker屬於外部文件，所以它不能獲取javascript這些對象： window 對象，document 對象，parent 對象。