async
和await
可讓您以同步方式編寫以承諾為基礎的程式碼,但不會封鎖主執行緒。- 指標事件提供統一方式,可處理所有輸入事件。
- 新增至主畫面的網站會自動獲得「持久性儲存空間」權限。
還有更多功能。
我是 Pete LePage,歡迎來到 Chrome 55 開發人員新功能介紹!
指標事件
過去,在網路上指向某個項目很簡單。你有滑鼠,可以移動滑鼠,有時還能按按鈕,但這在這個地方不太管用。
觸控事件很不錯,但為了支援觸控和滑鼠,您必須支援兩種事件模型:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome 現已透過調度 PointerEvents 啟用統一輸入處理功能:
elem.addEventListener('pointermove', pointerMoveEvent);
指標事件會將瀏覽器的指標輸入模式統一,將觸控、觸控筆和滑鼠整合為一組事件。IE11、Edge、Chrome、Opera 和 Firefox 部分支援。
詳情請參閱指引前進方向。
async
和await
非同步 JavaScript 可能難以推論。請使用此函式,並搭配所有「可愛」的回呼:
function logFetch(url) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('xhr failed', xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', url);
xhr.send();
}
使用 promises
重新編寫這段程式碼,有助於避免巢狀結構問題:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
不過,如果有長串的非同步依附元件鏈結,以 Promise 為基礎的程式碼仍可能難以閱讀。
Chrome 現已支援 async
和 await
JavaScript 關鍵字,讓您可以編寫以 Promise 為基礎的 JavaScript,讓程式碼具有結構化和可讀性,就像同步程式碼一樣。
因此,我們的非同步函式可以簡化為以下形式:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake 有篇很棒的文章:非同步函式 - 讓承諾更友善,其中包含所有詳細資訊。
永久儲存空間
永久性儲存空間來源試用方案現已結束。您現在可以將網頁儲存空間標示為永久性,避免 Chrome 自動清除網站的儲存空間。
if (navigator.storage && navigator.storage.persist) {
navigator.storage.persist().then(granted => {
if (granted)
alert("Storage will not be cleared except by explicit user action");
else
alert("Storage may be cleared by the UA under storage pressure.");
});
}
此外,如果網站互動率高、已加入主畫面或已啟用推播通知,系統會自動授予持久性權限。
請參閱 Chris Wilson 的「Persistent Storage」文章,瞭解詳細資訊,以及如何為網站要求永久性儲存空間。
CSS 自動斷字
CSS 自動斷字是 Chrome 最常被要求的版面配置功能之一,現在已支援 Android 和 Mac。
Web Share API
最後,您現在可以透過新的 Web Share API 輕鬆叫用原生分享功能,這項 API 可做為來源測試使用。Paul (Mr. Web Intents) Kinlan 在Navigator Share 文章中提供所有詳細資訊。
結語
以上只是 Chrome 55 開發人員版的部分變更。
如要隨時掌握 Chrome 最新消息,並瞭解即將推出的功能,請務必訂閱,並查看 Chrome 開發人員大會的影片,深入瞭解 Chrome 團隊正在開發的優異功能。
我是 Pete LePage,Chrome 56 一推出,我就會在這裡告訴你 Chrome 有哪些新功能!