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

NusterCache 發布于2019-08-23 12:17 / 1231人閱讀

摘要：事件，當文檔從可見變為不可見或從不可見變為可見時，觸發該事件要為兩個事件都指定事件處理程序對象包含個方法，接收個參數成功回調函數可選的失敗回調函數可選的選項對象。，事件已經發生且執行完所有事件處理程序的時間。

新興的API requestAnimationFrame() 早期動畫循環

基本動畫循環

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

循環間隔問題

幾個瀏覽器的計時器精度

IE8 及更早版本的計時器精度為 15.625ms。

IE9 及更晚版本的計時器精度為 4ms。

Firefox 和 Safari 的計時器精度大約為 10ms。

Chrome 的計時器精度為 4ms。

mozRequestAnimationFrame()

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

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

三部分組成

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

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

頁面在后臺標簽頁中或瀏覽器最小化。

頁面在前臺標簽頁中。

實際的頁面已經隱藏，但用戶可以看到頁面的預覽（就像在 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()) + "
";
  } else {
    msg = "Page is now visible. " + (new Date()) + "
";
  }
  output.innerHTML += msg;
}
//要為兩個事件都指定事件處理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange);
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

Geolocation API

navigator.geolocation對象包含3個方法

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

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

latitude，以十進制度數表示的緯度。

longitude，以十進制度數表示的經度。

accuracy，經、緯度坐標的精度，以米為單位。

altitude，以米為單位的海拔高度，如果沒有相關數據則值為 null 。

altitudeAccuracy，海拔高度的精度，以米為單位，數值越大越不精確。

heading，指南針的方向，0°表示正北，值為 NaN 表示沒有檢測到數據。

speed，速度，即每秒移動多少米，如果沒有相關數據則值為 null

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

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

選項對象，用于設定信息的類型?？梢栽O置的選項有三個：enableHightAccurancy是一個布爾值，表示必須盡可能使用最準確的位置信息；timeout是以毫秒數表示的等待位置信息的最長時間；maximumAge表示上一次取得坐標信息的有效時間，毫秒表示

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 = "";
        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 = "";
    } 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)
";
    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");

云服務器 GPU云服務器明解c語言第9章獨立開發變現周刊（第25期）：免費表單生第3篇第3方支付接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98252.html

高程3總結#第3章基本概念

摘要：基本概念語法區分大小寫，中的一切變量函數名和操作符都區分大小寫。要將一個值轉換成對應的值，可以調用類型包括整數和浮點數值，基本數值字面量格式是十進制整數，除了十進制外還有八進制十六進制。八進制第一位必須是，十六進制第一位必須是。基本概念語法區分大小寫，ECMAScript中的一切(變量、函數名和操作符)都區分大小寫。函數名不能使用typeof，因為它是一個關鍵字，但typeOf...

Rindia 2019-08-23 11:46 評論0 收藏0
高程3總結#第11章DOM擴展

摘要：操作類名時可以通過屬性添加刪除和替換類名。如果將可選的參數設置為，則表示盡量將元素顯示在視口中部垂直方向。將元素的內容滾動指定的頁面高度，具體高度由元素的高度決定。 DOM擴展選擇符API querySelector()方法 querySelector()方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null //取得body元素 var b...

cucumber 2019-08-23 12:00 評論0 收藏0
高程3總結#第5章引用類型

摘要：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。類型類型來自使用操作符和構造函數同樣返回表示日期的毫秒數，但它與在構建時使用不同的信息。類型類型，與布爾值對應的引用類型。引用類型 Object類型兩種創建Object實例的對象使用new操作符后跟Object構造函數 var person=new Object(); person.name=Nicholas;...

Zachary 2019-08-23 11:50 評論0 收藏0
高程3總結#第16章HTML5腳本編程

摘要：腳本編程跨文檔消息傳遞跨文檔消息傳送，簡稱為，指的是來自不同域的頁面間傳遞消息的核心是方法，在規范中，除了部分之外的其他部分也會提到這個方法名，但都是為了同一個目的，向另一個地方傳遞參數。第一個頁面加載時為空 HTML5腳本編程跨文檔消息傳遞跨文檔消息傳送，簡稱為XMD，指的是來自不同域的頁面間傳遞消息 XMD的核心是postMessage()方法，在HTML5規范中，除了XDM...

silvertheo 2019-08-23 12:07 評論0 收藏0
高程3總結#第8章BOM

摘要：對象的核心對象是，它表示瀏覽器的一個實例。而和則表示該容器中頁面視圖區的大小。在中，與返回相同的值，即視口大小而非瀏覽器窗口大小。第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性。這應該是用戶打開窗口后的第一個頁面 BOM window對象 BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪...

MASAILA 2019-08-23 11:57 評論0 收藏0