HTML5與移動端Web

本文轉載自查看原文 2016-09-04 17:13 4990 JavaScript

概述

HTML5 提供了很多新的功能，主要有：

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

移動前端開發可分為：

手機網頁開發。這部分跟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文件

QQ截圖20150604182750.png

其次，創建一個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

三個核心方法：

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

2、transaction：這個方法允許我們根據情況控制事務提交或回滾。

3、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可以提示用戶需要權限去使用像攝像頭或麥克風之類的媒體設備

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

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

QQ截圖20150604183146.png

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

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();