HTML5新特性概述(下)

IT男爵發表於2019-03-03
HTML

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

1. 拖放（Drag 和 drop）

拖放是html5提供一個新的特性，這個特性增加了拖拽事件的api,和定義可以拖拽的屬性。舉個例子，在h5之前實現拖拽功能，其實用的是一種模擬方式，滑鼠onmousedown時，獲取當前的一些資訊，然後在onmousemove時不斷更新推拽物件的left和top值，最後在onmouseup時對推拽物件徹底賦值，並進行釋放後一系列的程式操作。現在h5出來後呢，不在需要模擬了，因為它已經有標準的事件api了，下面看例子：
`

<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`;
		}
複製程式碼

`

注意：拖拽物件必須把draggable屬性設定為true，其他開發思維其實和以前一樣的，沒有多大差別，只是多了更多的監聽事件而已，想要詳細瞭解拖拽的同學可以去拖放API檢視。

2. 地理定位

地理定位這個特性，故名思意，就是獲取使用者位置資訊的。通過getCurrentPosition()獲取一系列定位資訊，getCurrentPosition()有兩個回撥函式引數，獲取地理位置成功的回撥和失敗的回撥。

`

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 地理定位去檢視哦。

3. 離線儲存

HTML5，通過建立 cache manifest 檔案，可以建立 web 應用的離線版本。如果要啟用應用程式快取，必須在文件的 <html> 標籤中包含 manifest 屬性：每個指定了 manifest 的頁面在使用者對其訪問時都會被快取。如果未指定 manifest 屬性，則頁面不會被快取（除非在 manifest 檔案中直接指定了該頁面）。
manifest 檔案的建議的副檔名是：”.appcache”.請注意，manifest 檔案需要配置正確的 MIME-type，即 “text/cache-manifest”。必須在 web 伺服器上進行配置

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 物件。

總結

HTML5新特性概述本次用上下倆篇進行了總結和簡單的概述，目的就是給大家一個關於html5總體的認識。本次分享就到這裡了，喜歡的朋友幫給個贊吧，謝謝。

相關文章