HTML5高級程序設計

時間 2019-12-06

原文原文鏈接

1.HTML5功能

Canvas(2D和3D)
Channel消息傳送
Cross-document消息傳送
Geolocation
MathML
Microdata
Server-Sent Events
Scalable Vector Graphics(SVG)
WebSocket API及協議
Web Origin Concept
Web Storage
Web SQL database
Web Workers
XMLHttpRequest Level 2

2.HTML5新的DOCTYPE和字符集

<!DOCTYPE html>
<meta charset='utf-8'>

使用HTML5的DOCTYPE會觸發瀏覽器以標準兼容模式顯示頁面。衆所周知，Web頁面有多種顯示模式，好比怪異模式、近標準模式以及標準模式。其中標準模式也被稱爲非怪異模式。瀏覽器會根據DOCTYPE來識別應該使用哪一種模式，以及使用什麼規則來驗證頁面。在怪異模式下，瀏覽器會盡可能不中斷頁面顯示，即便沒有徹底經過驗證也會將其顯示出來。css

3.新元素和舊元素

內容類型	描述
內嵌	向文檔中添加其餘類型的內容，例如audio、video、canvas和iframe等
流	在文檔和應用的body中使用的元素，form、h1和small等
標題	h一、h2和hgroup等
交互	與用戶交互的內容，例如音頻和視頻的控件、button和textarea等
元數據	一般出如今頁面的head中，設置頁面其餘部分的表現和行爲，例如script、style和title等
短語	文本和文本標記元素，mark、kbd、sub和sup等
片斷	用於定義頁面片斷的元素，article、aside和title等

4.語義化標記

元素名	描述
header	標記頭
footer	標記腳部區域
section	Web頁面中的一塊區域
article	獨立的文章內容
aside	相關內容或者引文
nav	導航類輔助內容

5.使用Selecors API簡化選取操做

函數	描述	示例	結果
querySelector()	根據指定的選擇規則，返回在頁面中找到的第一個匹配元素	querySelector("input.error")	返回第一個CSS類名爲"error"的文本輸入框
querySelectorAll()	根據指定規則返回頁面中全部相匹配的元素	querySelectorAll("#results td")	返回id值爲results的元素下全部的單元格

能夠爲Selectors API函數同時指定多個選擇規則，例如：
//選擇文檔中類名爲highClass或lowClass的第一個元素
var x = document.querySelector(".highClass", ".lowClass");html

提示：Selectors API不只僅只是方便，在遍歷DOM的時候，Selectors API一般會比之前的子節點搜索API更快。爲了實現快速樣式表，瀏覽器對選擇器匹配進行了高度優化。canvas

6.判斷瀏覽器是否支持canvas

document.createElement("canvas").getContext("2d");

檢查瀏覽器canvas是否有getContext屬性瀏覽器

7.canvas使用

function drawDiagonal() {
    //取得canvas元素及其繪圖上下文
    var canvas = document.getElementById("diagonal");
    var context = canvas.getContext("2d");

    //用絕對座標來建立一條路徑
    context.beginPath();
    context.moveTo(70, 140);
    context.lineTo(140, 70);

    //將這條線繪製到canvas上
    context.stroke();
}

window.addEventListener("load", drawDiagonal, true);

首先經過引用特定的canvasID值來獲取對canvas對象的訪問權。接着定義一個context變量，調用canvas對象的getContext方法，並傳入但願使用的canvas類型。代碼中經過傳入「2d」來獲取一個二維上下文。
接下來，基於這個上下文執行畫線的操做。在代碼中，調用了三個方法——beginPath、moveTo和lineTo，傳入了這條線的起點和終點的座標。
方法moveTo和lineTo實際上並不畫線，而是在結束canvas操做的時候，經過調用context.stroke()方法完成線條的繪製。

8.使用HTML Geolocation API

檢查瀏覽器支持性緩存

function loadDemo() {
    if (navigator.geolocation) {
        alert("支持定位！")
    }
}

9.跨文檔消息通訊

跨文檔消息通訊能夠確保iframe、標籤頁、窗口間安全地進行跨源通訊。它把postMessage API定義爲發送消息的標準方式。利用postMessage發送消息很是簡單，代碼以下所示：chatFrame.contentWindow.postMessage('Hello, world', 'http://www.example.com/');安全

接收消息時僅需在頁面中增長一個事件處理函數。當某個消息到達時，經過檢查消息的來源來決定是否對這條消息進行處理。服務器

//消息事件監聽器
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch (e.origin) {
        case "friend.example.com":
            //處理消息
            processMessage(e.data);
            break;
        default:
        //消息來源沒法識別
        //消息被忽略
    }
}

在調用postMessage前，應該首先檢測瀏覽器是否支持它：

if (typeof window.postMessage == undefined) {
    alert("該瀏覽器不支持postMessage");
}

window.postMessage('Hello, world', 'http://www.example.com/');

第一個參數包含要發送的數據，第二個參數是消息傳送的目的地。要發送消息給iframe，能夠在相應iframe的contentWindow中調用postMessage，代碼以下：多線程

document.getElementsByTagName('iframe')[0].contentWindow.postMessage("Hello, World", "chat.example.net");

監聽消息事件並經過白名單鑑定源：

var originWhiteList = ["XXX.com", "WWW.com"];
function checkWhiteList(origin) {
    for (var i = 0; i < originWhiteList.length; i++) {
        if (origin === originWhiteList[i]) {
            return true;
        }
    }
    return false;
}

function messageHandler(e) {
    if (checkWhiteList(e.origin)) {

    } else {
        
    }
}

10.XMLHttpRequest Level 2

做爲XMLHttpRequest的改進版，XMLHttpRequest Level2在功能上有了很大的改進。主要集中在一下兩個方面：app

跨源XMLHttpRequest;
進度事件

跨源XMLHttpRequest

過去，XMLHttpRequest僅限於同源通訊。XMLHttpRequest Level2經過CORS(Cross Origin Resource Sharing，跨源資源共享)實現了跨源XMLHttpRequest。cors

跨源HTTP請求包括了一個Origin頭部，它爲服務器提供HTTP請求的源信息。頭部由瀏覽器保護，不能被應用程序代碼更改。

進度事件

XMLHttpRequest Level2用了一個有意義的名字Progess進度來命名進度事件。

loadstart
progress
abort
error
load
loadend

11.WebSockets API

HTML5 WebSockets是HTML5中最強大的通訊功能，它定義了一個全雙工通訊信道，僅經過Web上的一個Socket便可進行實時通訊。WebSocketss不只僅是對常規HTTP通訊的另外一種增量增強，它更表明着一次巨大的進步，對實時的、事件驅動的Web應用程序而言更是如此。

目前實時Web應用的實現方式，大部分是圍繞輪詢和其餘服務器端推送技術展開的，其中最著名的是Comet。Comet技術可讓服務器端主動以異步方式向客戶端推送數據，它會使針對傳輸消息到客戶端的相應延遲完成。
使用輪詢時，瀏覽器會按期發送HTTP請求，並隨即接收響應。
使用長輪詢時，瀏覽器向服務器發送一個請求，服務器會在一段時間內將其保持在打開狀態。若是服務器在此期間收到一個通知，就會向客戶端發送一個包含消息的響應。若是時間已到卻還沒接收到通知，服務器會發送一個響應消息來終止打開的請求。
使用流解決方案時，瀏覽器會發送一個完整的HTTP請求，但服務器會發送並保持一個處於打開狀態的響應，該響應持續更新並沒有限期處於打開狀態。每當有消息可發送時該響應就會被更新，但服務器永遠不會發出響應完成的信號，這樣鏈接就會一致保持在打開狀態以便後續消息的發送。可是，因爲流仍然是封裝在HTTP中，其間的防火牆和代理服務器可能會對響應消息進行緩衝，形成消息傳遞的時延。所以，當檢測到緩衝代理服務器時，許多流解決方案就回退到長輪詢方式。

12.Web Workers API

HTML5 Web Workers可讓Web應用程序具有後臺處理能力。它對多線程的支持性很是好，所以，使用了HTML5的JavaScript應用程序能夠充分利用多核CPU帶來的優點。
若是Web開發人員建立的Web應用程序須要執行一些後臺數據處理，但又不但願這些數據處理任務影響Web頁面自己的交互性，那麼能夠經過Web Workers生成一個Web Worker去執行數據處理任務，同時添加一個事件監聽器區監聽它發出的信息。

13.使用HTML5離線Web應用API

檢查瀏覽器支持狀況

if(window.applicationCache){
    //瀏覽器支持離線應用
}

搭建簡單的離線應用程序

假設開發人員但願搭建一個包含HTML文檔、樣式表和JS文件的單頁應用程序，同時要爲這個HTML5應用程序添加離線支持，那麼能夠在html元素中加入manifest特性：

<!DOCTYPE html>
<html manifest="application.manifest">
...
</html>

緩存清單文件內容示例

CACHE MANIFEST
example.html
example.js
example.css
example.gif

檢查在線狀態

//頁面加載的時候，設置狀態爲online或offline
function loadDemo(){
    if(navigator.online){

    }
}

//添加事件監聽器，在線狀態發生變化時，觸發相應動做
window.addEventListener("online", function(e){
    
},true);

window.addEventListener("offline", function(e){

},true);