高程3總結#第25章新興的API

時間  2019-12-07
標籤 高程 總結 新興 api 简体版
原文   原文鏈接

新興的API

requestAnimationFrame()

早期動畫循環

  • 基本動畫循環javascript

    (function(){
  function updateAnimations(){
    doAnimation1();
    doAnimation2();
    //其餘動畫
  }
  setInterval(updateAnimations, 100);
})();

循環間隔問題

  • 幾個瀏覽器的計時器精度php

    • IE8 及更早版本的計時器精度爲 15.625ms。
    • IE9 及更晚版本的計時器精度爲 4ms。
    • Firefox 和 Safari 的計時器精度大約爲 10ms。
    • Chrome 的計時器精度爲 4ms。

mozRequestAnimationFrame()

  • mozRequestAnimationFrame() 方法接收一個參數，即在重繪屏幕前調用的一個函數。這個函數負責改變下一次重繪時的 DOM樣式。爲了建立動畫循環，能夠像之前使用 setTimeout() 同樣，把多個對mozRequestAnimationFrame() 的調用連綴起來html

    function updateProgress(){
  var div = document.getElementById("status");
  div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
  if (div.style.left != "100%"){
    mozRequestAnimationFrame(updateProgress);
  }
}
mozRequestAnimationFrame(updateProgress);

webkitRequestAnimationFrame()與msRequestAnimationFrame()

(function(){
function draw(timestamp){
  //計算兩次重繪的時間間隔
  var drawStart = (timestamp || Date.now()),
      diff = drawStart - startTime;
  //使用 diff 肯定下一步的繪製時間
  //把 startTime 重寫爲這一次的繪製時間
  startTime = drawStart;
  //重繪 UI
  requestAnimationFrame(draw);
}
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame,
    startTime = window.mozAnimationStartTime || Date.now();
requestAnimationFrame(draw);
})();

Page Visibility API

  • 三部分組成java

    • document.hidden，表示頁面是否隱藏的布爾值。頁面隱藏包括頁面在後臺標籤頁中或者瀏覽器最小化。

    • document.visibilityState，表示下列 4 個可能狀態的值。git

      • 頁面在後臺標籤頁中或瀏覽器最小化。
      • 頁面在前臺標籤頁中。
      • 實際的頁面已經隱藏，但用戶能夠看到頁面的預覽（就像在 Windows 7 中，用戶把鼠標移動到任務欄的圖標上，就能夠顯示瀏覽器中當前頁面的預覽）。
      • 頁面在屏幕外執行預渲染處理。
    • visibilitychange 事件，當文檔從可見變爲不可見或從不可見變爲可見時，觸發該事件
    function handleVisibilityChange(){
  var output = document.getElementById("output"),
      msg;
  if (document.hidden || document.msHidden || document.webkitHidden){
    msg = "Page is now hidden. " + (new Date()) + "<br>";
  } else {
    msg = "Page is now visible. " + (new Date()) + "<br>";
  }
  output.innerHTML += msg;
}
//要爲兩個事件都指定事件處理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange);
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

Geolocation API

  • navigator.geolocation對象包含3個方法web

    • getCurrentPosition()，接收3個參數：成功回調函數、可選的失敗回調函數、可選的選項對象。瀏覽器

      • 成功回調函數，有兩個屬性：coords和timestamp。其中coords包含相關信息服務器

        • latitude，以十進制度數表示的緯度。
        • longitude，以十進制度數表示的經度。
        • accuracy，經、緯度座標的精度，以米爲單位。
        • altitude，以米爲單位的海拔高度，若是沒有相關數據則值爲 null 。
        • altitudeAccuracy，海拔高度的精度，以米爲單位，數值越大越不精確。
        • heading，指南針的方向，0°表示正北，值爲 NaN 表示沒有檢測到數據。
        • speed，速度，即每秒移動多少米，若是沒有相關數據則值爲 null

      • 失敗回調函數，在被調用的時候接收一個參數，這個參數是一個對象，包含兩個屬性：message和code。其中message屬性中包含文本信息，解釋爲何會出錯，code中保存着一個值，表示錯誤的類型：用戶拒絕共享一、位置無效二、超時3app

        navigator.geolocation.getCurrentPosition(function(position){
  drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
  console.log("Error code: " + error.code);
  console.log("Error message: " + error.message);
})

      • 選項對象，用於設定信息的類型。能夠設置的選項有三個：enableHightAccurancy是一個布爾值，表示必須儘量使用最準確的位置信息；timeout是以毫秒數表示的等待位置信息的最長時間；maximumAge表示上一次取得座標信息的有效時間，毫秒錶示dom

        navigator.geolocation.getCurrentPosition(function(position){
  drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
  console.log("Error code: " + error.code);
  console.log("Error message: " + error.message);
}, {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 25000
})
    • 另外一個方法是watchPosition()這個方法接收的參數與上一個方法同樣

File API

  • 每一個File對象都有下列只讀屬性

    • name，本地文件系統中的文件名。
    • size，文件的字節大小。
    • type，字符串，文件的 MIME 類型。
    • lastModifiedDate，字符串，文件上一次被修改的時間

FileReader類型

  • 爲了讀取文件中的數據，FileReader提供的方法

    • readAsText(file,encoding)，以純文本形式讀取文件，將讀取到的文本保存在 result 屬性中。第二個參數用於指定編碼類型，是可選的。
    • readAsDataURL(file)，讀取文件並將文件以數據 URI 的形式保存在 result 屬性中。
    • readAsBinaryString(file)，讀取文件並將一個字符串保存在 result 屬性中，字符串中的每一個字符表示一字節。
    • readAsArrayBuffer(file)，讀取文件並將一個包含文件內容的 ArrayBuffer 保存在result 屬性中
    var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      type = "default",
      reader = new FileReader();
  if (/image/.test(files[0].type)){
    reader.readAsDataURL(files[0]);
    type = "image";
  } else {
    reader.readAsText(files[0]);
    type = "text";
  }
  reader.onerror = function(){
    output.innerHTML = "Could not read file, error code is " +
      reader.error.code;
  };
  reader.onprogress = function(event){
    if (event.lengthComputable){
      progress.innerHTML = event.loaded + "/" + event.total;
    }
  };
  reader.onload = function(){
    var html = "";
    switch(type){
      case "image":
        html = "<img src=\"" + reader.result + "\">";
        break;
      case "text":
        html = reader.result;
        break;
    }
    output.innerHTML = html;
  };
});

讀取部份內容

  • File對象還支持slice()方法，這個方法接收兩個參數：起始的字節及要讀取的字節數

    function blobSlice(blob, startByte, length){
  if (blob.slice){
    return blob.slice(startByte, length);
  } else if (blob.webkitSlice){
    return blob.webkitSlice(startByte, length);
  } else if (blob.mozSlice){
    return blob.mozSlice(startByte, length);
  } else {
    return null;
  }
}

  • Blob類型有一個size屬性和一個type屬性，支持slice()方法，以便進一步切割數據

    var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      reader = new FileReader(),
      blob = blobSlice(files[0], 0, 32);
  if (blob){
    reader.readAsText(blob);
    reader.onerror = function(){
      output.innerHTML = "Could not read file, error code is " +
        reader.error.code;
    };
    reader.onload = function(){
      output.innerHTML = reader.result;
    };
  } else {
    alert("Your browser doesn' t support slice().");
  }
});

對象URL

  • 使用對象URL的好處是能夠沒必要把文件內容讀取到JavaScript中而直接使用文件內容，爲此只要在須要文件內容的地方提供對象URL便可，要建立對象URL，能夠使用window.URL.createObjectURL()方法，並傳入File或Blob對象

    var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      reader = new FileReader(),
      url = createObjectURL(files[0]);
  if (url){
    if (/image/.test(files[0].type)){
      output.innerHTML = "<img src=\"" + url + "\">";
    } else {
      output.innerHTML = "Not an image.";
    }
  } else {
    output.innerHTML = "Your browser doesn't support object URLs.";
  }
});

讀取拖放的文件

var droptarget = document.getElementById( "droptarget");
function handleEvent(event){
var info = "",
    output = document.getElementById("output"),
    files, i, len;
EventUtil.preventDefault(event);
if (event.type == "drop"){
  files = event.dataTransfer.files;
  i = 0;
  len = files.length;
  while (i < len){
    info += files[i].name + " (" + files[i].type + ", " + files[i].size +
      " bytes)<br>";
    i++;
  }
  output.innerHTML = info;
}
}
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);

使用XHR上傳文件

var droptarget = document.getElementById("droptarget");
function handleEvent(event){
var info = "",
    output = document.getElementById("output"),
    data, xhr,
    files, i, len;
EventUtil.preventDefault(event);
if (event.type == "drop"){
  data = new FormData();
  files = event.dataTransfer.files;
  i = 0;
  len = files.length;
  while (i < len){
    data.append("file" + i, files[i]);
    i++;
  }
  xhr = new XMLHttpRequest();
  xhr.open("post", "FileAPIExample06Upload.php", true);
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
      alert(xhr.responseText);
    }
  };
  xhr.send(data);
}
}
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);

Web計時

  • navigationStart，開始導航到當前頁面的時間。
  • unloadEventStart，前一個頁面的 unload 事件開始的時間。但只有在前一個頁面與當前頁面來自同一個域時這個屬性纔會有值；不然，值爲 0。
  • unloadEventEnd，前一個頁面的 unload 事件結束的時間。但只有在前一個頁面與當前頁面來自同一個域時這個屬性纔會有值；不然，值爲 0。
  • redirectStart，到當前頁面的重定向開始的時間。但只有在重定向的頁面來自同一個域時這個屬性纔會有值；不然，值爲 0。
  • redirectEnd，到當前頁面的重定向結束的時間。但只有在重定向的頁面來自同一個域時這個屬性纔會有值；不然，值爲 0。
  • fetchStart，開始經過 HTTP GET 取得頁面的時間。
  • domainLookupStart，開始查詢當前頁面 DNS 的時間。
  • domainLookupEnd，查詢當前頁面 DNS 結束的時間。
  • connectStart，瀏覽器嘗試鏈接服務器的時間。
  • connectEnd，瀏覽器成功鏈接到服務器的時間。
  • secureConnectionStart，瀏覽器嘗試以 SSL 方式鏈接服務器的時間。不使用 SSL 方式鏈接時，這個屬性的值爲 0。
  • requestStart，瀏覽器開始請求頁面的時間。
  • responseStart，瀏覽器接收到頁面第一字節的時間。
  • responseEnd，瀏覽器接收到頁面全部內容的時間。
  • domLoading，document.readyState 變爲 "loading" 的時間。
  • domInteractive，document.readyState 變爲 "interactive" 的時間。
  • domContentLoadedEventStart，發生 DOMContentLoaded 事件的時間。
  • domContentLoadedEventEnd，DOMContentLoaded 事件已經發生且執行完全部事件處理程序的時間。
  • domComplete，document.readyState 變爲 "complete" 的時間。
  • loadEventStart，發生 load 事件的時間。
  • loadEventEnd，load 事件已經發生且執行完全部事件處理程序的時間。

Web Workers

使用Worker

  • 只有Worker接收到消息纔會實際執行文件彙總的代碼。要給Worker傳遞消息，能夠使用postMessage()方法，消息內容能夠是任何可以被序列化的值

    worker.postMessage(「start! ");

Worker全局做用域

  • Worker執行的JavaScript代碼徹底在另外一個做用域中，與當前網頁中的代碼不共享做用域

  • Web Worker自己也是一個最小化的運行環境

    • 最小化的 navigator 對象，包括 onLine 、 appName 、 appVersion 、 userAgent 和 platform屬性；
    • 只讀的 location 對象；
    • setTimeout() 、 setInterval() 、 clearTimeout() 和 clearInterval() 方法；
    • XMLHttpRequest 構造函數。

包含其餘腳本

  • Worker的全局做用域提供這個功能，能夠調用importScripts()方法，這個方法接收一個或多個指向JavaScript文件的URL，每一個加載過程都是異步進行的。所以全部腳本加載以後，importScripts()纔會執行

    //Web Worker 內部的代碼
importScripts("file1.js", "file2.js");
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程