HTML5與移動端web學習筆記

n5em 9年前發布 | 60K 次閱讀 HTML5 前端技術

概述

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與移動端web學習筆記

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文件

HTML5與移動端web學習筆記

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

HTML5與移動端web學習筆記

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。

HTML5與移動端web學習筆記

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

getUserMedia API

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

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

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

HTML5與移動端web學習筆記

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

HTML5與移動端web學習筆記

audio和video

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

HTML5與移動端web學習筆記

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

全屏屬性和事件