- 只要使用新的 CSS Typed Model 物件,就能更輕鬆地操控 CSS。
- 剪貼簿現在會以非同步方式存取。
- 畫布元素可使用新的算繪結構定義。
以及更多更多功能!
我是 Pete LePage。讓我們深入探索 Chrome 66 為開發人員推出的新功能!
想要完整的異動清單嗎?請參閱 Chromium 來源存放區變更清單。
CSS 型別物件模型
如果您曾透過 JavaScript 更新 CSS 屬性,表示您已使用 CSS 物件模型。但會以字串的形式傳回所有內容。
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
如要為 opacity
屬性建立動畫,我必須將字串轉換成數字,然後增加值並套用變更。不太理想。
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
使用新的 CSS 類型物件模型時,CSS 值會以輸入的 JavaScript 物件的形式顯示,可消除許多類型的操控,為 CSS 提供更簡便的方式使用 CSS。
您可以透過 .attributeStyleMap
屬性或 .styleMap
存取樣式,而不使用 element.style
。這些物件會傳回類似地圖的物件,方便使用者讀取或更新。
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
相較於舊版 CSS 物件模型,早期基準測試顯示每秒作業數可達到約 30%,這對 JavaScript 動畫來說特別重要。
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
這也有助於避免忘記將值從字串轉換成數字時造成的錯誤,而且會自動處理值的捨入和取值範圍限制。此外,還有一些很不錯的新方法可以處理單位轉換、算術和相等。
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric 在說明中發表了很精彩的文章,並提供幾個示範和範例。
Async Clipboard API
const successful = document.execCommand('copy');
使用 document.execCommand
的同步複製及貼上適用於小部分文字,但對於其他任何部分,同步處理很可能會封鎖網頁,導致使用者體驗不佳。瀏覽器之間的權限模型也不一致。
新版 Async Clipboard API 是能夠以非同步方式運作的替代方案,並能與權限 API 整合,為使用者提供更優質的體驗。
呼叫 writeText()
即可將文字複製到剪貼簿。
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
由於這個 API 為非同步,writeText()
函式會傳回 Promise,這個 Promise 會根據我們傳送的文字是否成功複製,進行解析或拒絕。
同樣地,也可以透過呼叫 getText()
從剪貼簿讀取文字,並等待傳回的 Promise 以文字解析。
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
歡迎參閱 Jason 的說明文章和示範。並提供了使用 async
函式的範例。
新增 Canvas 結構定義 BitmapRenderer
canvas
元素可讓您處理像素層級的圖形、繪製圖形、處理相片,甚至是即時處理影片。但除非您從空白 canvas
開始,否則您需要在 canvas
上算繪圖片的方法。
以往您需要建立 image
標記,然後將內容傳送至 canvas
。遺憾的是,瀏覽器需要在記憶體中儲存多個圖片副本。
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
從 Chrome 66 版開始,
現在會有新的非同步轉譯環境,可以簡化 ImageBitmap
物件的顯示作業。現在這些程式庫能以非同步方式運作並避免記憶體重複,提高算繪效率,減少資源浪費。
使用方法:
- 呼叫
createImageBitmap
並交給該圖片 blob 來建立圖片。 - 從
canvas
取得bitmaprenderer
結構定義。 - 然後將圖片轉入。
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
完成,我顯示圖片了!
AudioWorklet
運動小工具上架了!在 Chrome 65 版中推出 PaintWorklet,現在我們會在 Chrome 66 中預設啟用 AudioWorklet。這個新型 Worklet 可用於處理專屬音訊執行緒中的音訊,取代在主執行緒上執行的舊版 ScriptProcessorNode。每個 AudioWorklet 都會在自己的全域範圍內執行,藉此縮短延遲時間並提高處理量的穩定性。
Google Chrome 研究室提供了有趣的 AudioWorklet 範例。
還有更多獎品等著您!
以上只是 Chrome 66 中開發人員的幾項變更,當然還有許多變更。
TextArea
和Select
現在支援autocomplete
屬性。- 在
form
元素上設定autocapitalize
會套用至任何子項表單欄位,改善與 Safari 實作autocapitalize
的相容性。 trimStart()
和trimEnd()
現在是以標準為基礎的方法移除字串中的空白字元。
請務必查看 Chrome 開發人員工具新功能,瞭解 Chrome 66 開發人員工具的新功能。如果您對漸進式網頁應用程式有興趣,請查看新的 PWA 說明系列影片。接著,按一下我們的 YouTube 頻道上的「訂閱」按鈕,每當推出新影片時,您都會收到電子郵件通知。
我是 Pete LePage,Chrome 67 推出後,我很樂意告訴大家:Chrome 的新功能!