手機端筆記

時間 2019-11-18

標籤手機筆記简体版

原文原文鏈接

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)javascript

setDragImage 三個參數：指定的元素，座標X，座標Y
files 獲取外部拖拽的文件，返回一個filesList列表。filesList下有個type屬性，返回文件的類型css

方法描述
clearData 經過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數據格式。html

setData() : 設置數據 key和value(必須是字符串)前端

getData() : 獲取數據，根據key值，獲取對應的value
只有加阻止默認事件才能夠觸發drop
oDiv.ondragover = function(ev){ //只有加阻止默認事件才能夠觸發drop
ev.preventDefault();
};
drag and drop的瀏覽器支持狀況：
圖片描述

HTML5實現拖拽上傳預覽圖片：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1{
margin: 0 auto;
width:200px;
height:200px;
background:#ccc;
color: white;}
#div1 p{
position: relative;
top: 90px;
left: 50px;
}
li{ width:200px; height:200px; margin:5px; float:left; list-style:none;}
li img{ width:500px;height: auto}
</style>
<script type="text/javascript">html5

window.onload = function(){java

var oUl = document.getElementById('ul1');
var oDiv = document.getElementById('div1');ios

oDiv.ondragenter = function(){
this.innerHTML = '能夠釋放';
};web

oDiv.ondragover = function(ev){
ev.preventDefault();
};數據庫

oDiv.ondragleave = function(){
this.innerHTML = '請拖拽到此區域';
};canvas

oDiv.ondrop = function(ev){

ev.preventDefault();

var fs = ev.dataTransfer.files;

for(var i=0;i<fs.length;i++){

var fr = new FileReader();

if( fs[i].type.indexOf('image')!=-1 ){

fr.readAsDataURL( fs[i] );

fr.onload = function(){
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild( oImg );
oUl.appendChild( oLi );
};
}
else{
alert('親,請拖拽圖片格式');
}

}

};

};
</script>
</head>
<body>
<div id="div1"><p>請拖拽到此區域</p></div>
<ul id="ul1"></ul>
</body>
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.綁定worker.onmessage方法來接收worker發送過來的數據。

4.可使用 worker.terminate() 來終止一個worker的執行。
worker新線程：
1.經過postMessage( data ) 方法來向主線程發送數據。

2.綁定onmessage方法來接收主線程發送過來的數據。
例子：計數功能
首先建立一個index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</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能夠提示用戶須要權限去使用像攝像頭或麥克風之類的媒體設備.
下面是一個獲取用戶攝像頭並提供拍照功能的例子：
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">

// 添加事件監聽器
window.addEventListener("DOMContentLoaded", function() {
// 獲取元素，建立設置等等
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};

// 添加video 監聽器
if(navigator.getUserMedia) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit 前綴
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox 前綴
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}

document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

}, false);

</script>
</body>
下面是瀏覽器兼容性的寫法：
<script type = 'text/javascript'>
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
</script>
瀏覽器對象
圖片描述
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(); 全屏屬性和事件document.fullScreenElement：當前全屏顯示的元素。document.fullScreenEnabled：判斷瀏覽器是否支持全屏。fullscreenchange事件：全屏狀態改變事件。History APIHTML5 更新了兩個API，無刷新更新地址 history.pushState方法和history.replaceState 方法Geolocation APIGeolocation API 是經過window.navigator.geolocation 得到對地理定位的訪問的。該對象有以下三個方法：getCurrentPosition()watchPosition()clearWatch()圖片描述表單元素HTML5 新增了不少表單元素讓開發者構建更優秀的 Web 應用程序。如下是HTML5新增的表單元素datalistdatetimeoutputkeygen date month weektimecolornumber range email url圖片描述html5移動端優化PC端的優化對於移動端一樣適用，Android同時支持4個併發請求，iOS 5後可支持6個，因此，應儘可能減小http請求數移動端優化1. PC優化手段在Mobile側一樣適用2. 在Mobile側咱們提出三秒種渲染完成首屏指標3. 基於第二點，首屏加載3秒完成或使用Loading4. 基於聯通3G網絡平均338KB/s(2.71Mb/s)，因此首屏資源不該超過1014KB5. Mobile側因手機配置緣由，除加載外渲染速度也是優化重點6. 基於第五點，要合理處理代碼減小渲染損耗7. 基於第2、第五點，全部影響首屏加載和渲染的代碼應在處理邏輯中後置8. 加載完成後用戶交互使用時也需注意性能詳細的閱讀《WebAPP移動前端性能優化規範和設計指導》不濫用FloatFloat在渲染時計算量比較大，儘可能減小使用不濫用Web字體Web字體須要下載，解析，重繪當前頁面，儘可能減小使用不聲明過多的Font-size過多的Font-size引起CSS樹的效率減小重繪和迴流a) 避免沒必要要的Dom操做b) 儘可能改變Class而不是Style，使用classList代替classNamec) 避免使用document.writed) 減小drawImageViewport能夠加速頁面的渲染，請使用如下代碼< meta name=」viewport」 content=」width=device-width, initial-scale=1″>動畫優化a) 儘可能使用CSS3動畫b) 合理使用requestAnimationFrame動畫代替setTimeoutc) 適當使用Canvas動畫 5個元素之內使用css動畫，5個以上使用Canvas動畫（iOS8可以使用webGL）GPU加速CSS中如下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用PS：過渡使用會引起手機過耗電增長資料參考：如何作到一秒渲染一個移動頁面HTML5與CSS3語法提供瀏覽器兼容性測試及使用建議：http://html5please.com/meta相關總結值得你閱讀：Html Meta標籤的組成和移動web開發5種經常使用法HTML5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略將頁面中的數字識別爲電話號碼<meta name="format-detection" content="telephone=no" />忽略Android平臺中對郵箱地址的識別<meta name="format-detection" content="email=no" />當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari<meta name="apple-mobile-web-app-capable" content="yes" />將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式<meta name="apple-mobile-web-app-status-bar-style" content="black" />移動端touch事件(區分webkit 和 winphone)當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件如下支持webkit：touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動touchend——當手指離開屏幕時觸發touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用如下支持windows phone 8：MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動MSPointerUp——當手指離開屏幕時觸發手機拍照和上傳圖片<input type="file">的accept 屬性<input type=file accept="image/*"><input type=file accept="video/*">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。