HTML5與移動端Web

時間 2020-08-18

標籤 html5 html 移動 web 欄目 HTML5 简体版

原文原文鏈接

概述css

HTML5 提供了不少新的功能，主要有：html

新的 HTML 元素，例如 section, nav, header, footer, article 等前端
用於繪畫的 Canvas 元素html5
用於多媒體播放的 video 和 audio 元素android
用於定位的 Geolocation APIios
本地存儲以及離線應用git
Web Workers、Web WebSocket APIgithub

移動前端開發可分爲：web

手機網頁開發。這部分跟web前端開發差異不大，使用的技術都是html+css+js。區別爲手機瀏覽器是webkit的天下，pc端是IE的天下。數據庫
App前端開發。使用的技術也是html+css+js，但它須要基於PhoneGap，React Native等開發平臺調用手機核心功能接口（包括地理定位，加速器，聯繫人，聲音和振動等）模擬native app，這部分跟web前端開發徹底不一樣。最終代碼發佈要分別編譯成各系統平臺的app。

canvas

canvas部分請參考：淺嘗HTML5之canvas

drag and drop(拖拽)

拖拽元素事件: 事件對象爲被拖拽元素

dragstart: 拖拽前觸發
drag:拖拽前、拖拽結束之間，連續觸發
dragend: 拖拽結束觸發

目標元素事件: 事件對象爲目標元素

dragenter: 進入目標元素觸發，至關於mouseover
dragover: 進入目標、離開目標之間，連續觸發
dragleave: 離開目標元素觸發，至關於mouseout
drop: 在目標元素上釋放鼠標觸發

事件的執行順序：drop不觸發的時候

dragstart > drag > dragenter > dragover > dragleave > dragend

事件的執行順序：drop觸發的時候(dragover的時候阻止默認事件)

dragstart > drag > dragenter > dragover > drop > dragend

解決火狐下的問題

火狐瀏覽器下必須設置dataTransfer對象的setData方法才能夠拖拽除圖片外的其餘標籤。

dataTransfer屬性和方法

屬性	描述
dropEffect	設置或獲取拖曳操做的類型和要顯示的光標類型
effectAllowed	設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage	三個參數：指定的元素，座標X，座標Y
files	獲取外部拖拽的文件，返回一個filesList列表。filesList下有個type屬性，返回文件的類型

方法	描述
clearData	經過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數據格式
setData()	設置數據 key和value(必須是字符串)
getData()	獲取數據，根據key值，獲取對應的value

只有加阻止默認事件才能夠觸發drop

 
        oDiv.ondragover =  
        function 
        (ev){   
        //只有加阻止默認事件才能夠觸發drop 
       
        ev.preventDefault(); 
       
        };

drag and drop的瀏覽器支持狀況：

HTML5實現拖拽上傳預覽圖片（點擊下載實現代碼）

FileReader(讀取文件信息)

屬性名	描述
error	在讀取文件時發生的錯誤. 只讀
readyState	代表FileReader對象的當前狀態
result	讀取到的文件內容。這個屬性只在讀取操做完成以後纔有效

方法名	描述
abort	停止該讀取操做，在返回時,readyState屬性的值爲DONE
readAsArrayBuffer	將File對象F讀取爲一個 ArrayBuffer 對象
readAsBinaryString	將File對象F讀取爲一個二進制字符串
readAsDataURL	將File對象F讀取爲編碼過的數據URL
readAsText(File f, [encoding])	讀取 File對象F並賦予一個字符串

建立一個FileReader對象：

 
        var  
        reader =  
        new  
        FileReader();

Web Worker和緩存

Web Worker的基本原理就是在當前js的主線程中，使用Worker類加載一個js文件來開闢一個新的線程，起到互不阻塞執行的效果，而且提供主線程和新線程之間數據交換的接口：postMessage，onmessage。

主機 worker 和 worker 腳本能夠經過 postMessage 發送消息並使用 onmessage 事件偵聽響應。消息的內容做爲事件的數據屬性進行發送。

 
        var  
        worker =  
        new  
        Worker( 
        'worker.js' 
        ); 
       
        worker.onmessage =  
        function 
        (e) { 
       
        alert(e.data); 
       
        };

worker主線程:

1.經過 worker = new Worker( url ) 加載一個JS文件來建立一個worker，同時返回一個worker實例。

2.經過worker.postMessage( data ) 方法來向worker發送數據。

3.綁定orker.onmessage方法來接收worker發送過來的數據。

4.可使用 worker.terminate() 來終止一個worker的執行。

worker新線程：

1.經過postMessage( data ) 方法來向主線程發送數據。

2.綁定onmessage方法來接收主線程發送過來的數據。

例子：計數功能

首先建立一個index.html文件

其次，建立一個count.js文件：

 
        var  
        countNum = 0; 
       
        function  
        count(){ 
       
        postMessage(countNum); 
       
        countNum++; 
       
        setTimeout(count,1000); 
       
        } 
       
        count();

再建立一個index.js文件

 
        var  
        numDiv; 
       
        var  
        work =  
        null 
        ; 
       
        window.onload =  
        function  
        () { 
       
        numDiv = document.getElementById( 
        'numDiv' 
        ); 
       
        document.getElementById( 
        'start' 
        ).onclick = startWorker; 
       
        document.getElementById( 
        'stop' 
        ).onclick =  
        function  
        () { 
       
        if 
        (work){ 
       
        work.terminate(); 
        //中止，釋放掉資源 
       
        work =  
        null 
        ; 
        //work從新初始化 
       
        } 
       
        }; 
       
        }; 
       
        function  
        startWorker(){ 
       
        if 
        (work){ 
       
        return 
        ; 
       
        } 
       
        work =  
        new  
        Worker( 
        'count.js' 
        ); 
       
        work.onmessage =  
        function  
        (e) { 
       
        numDiv.innerHTML = e.data; 
       
        }; 
       
        }

Web SQL

三個核心方法：

一、openDatabase：這個方法使用現有數據庫或建立新數據庫建立數據庫對象。

二、transaction：這個方法容許咱們根據狀況控制事務提交或回滾。

三、executeSql：這個方法用於執行真實的SQL查詢。

瀏覽器的本地數據庫佔用資源少，處理速度快。

openDatabase方法打開一個已經存在的數據庫，若是數據庫不存在，它還能夠建立數據庫，建立並打開數據庫的語法以下：

 
        var  
        db = openDatabase( 
        'mydb' 
        ,  
        '1.0' 
        ,  
        'Test DB' 
        , 2 * 1024 * 1024);

參數爲：數據庫名（mydb）、版本號（1.0）、描述（Test DB）和數據庫大小（2*1024*1024）以及建立回調函數。

WebSockets

TCP是因特網的基礎傳輸協議，而WebSocket是Web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。WebSocket鏈接的是URL，而非因特網上的主機和端口。

 
        // 建立一個Socket實例 
       
        var  
        socket =  
        new  
        WebSocket( 
        'ws://localhost:8080' 
        ); 
       
        // 打開Socket 
       
        socket.onopen =  
        function 
        (ev) { 
       
        // 發送一個初始化消息 
       
        socket.send( 
        'hello HTML5' 
        ); 
       
        // 監聽消息 
       
        socket.onmessage =  
        function 
        (ev) { 
       
        console.log( 
        'Client received a message' 
        ,ev); 
       
        }; 
       
        // 監聽Socket的關閉 
       
        socket.onclose =  
        function 
        (ev) { 
       
        console.log( 
        'Client notified socket has closed' 
        ,ev); 
       
        }; 
       
        // 關閉Socket.... 
       
        socket.close() 
       
        };

同http協議使用http://開頭同樣，WebSocket協議的URL使用ws://開頭，而安全的WebSocket協議使用wss://開頭。

HTTP協議一般承載於TCP協議之上，有時也承載於TLS或SSL協議層之上，這個時候，就成了咱們常說的HTTPS。

默認HTTP的端口號爲80，HTTPS的端口號爲443。

getUserMedia API

navigator.getUserMedia能夠提示用戶須要權限去使用像攝像頭或麥克風之類的媒體設備

下面是一個獲取用戶攝像頭並提供拍照功能的例子（點擊下載實現源碼）

下面是瀏覽器兼容性的寫法：

瀏覽器對象（點擊下載大圖）

audio和video

下圖是audio和video的屬性及其瀏覽器的兼容性：

Fullscreen API

進入全屏模式

 
        // 找到正確的方法   
       
        function  
        launchFullScreen(element) {   
       
        if 
        (element.requestFullScreen) {   
       
        element.requestFullScreen();   
       
        }  
        else  
        if 
        (element.mozRequestFullScreen) {   
       
        element.mozRequestFullScreen();   
       
        }  
        else  
        if 
        (element.webkitRequestFullScreen) {   
       
        element.webkitRequestFullScreen();   
       
        }   
       
        }   
       
        // 啓動全屏模式   
       
        launchFullScreen(document.documentElement);  
        // 整個頁面   
       
        launchFullScreen(document.getElementById( 
        "videoElement" 
        ));  
        // 單獨元素  
       
        退出全屏模式 
       
        function  
        cancelFullscreen() {   
       
        if 
        (document.cancelFullScreen) {   
       
        document.cancelFullScreen();   
       
        }  
        else  
        if 
        (document.mozCancelFullScreen) {   
       
        document.mozCancelFullScreen();   
       
        }  
        else  
        if 
        (document.webkitCancelFullScreen) {   
       
        document.webkitCancelFullScreen();   
       
        }   
       
        }   
       
        // 取消全屏   
       
        cancelFullscreen();