[譯] Chrome 72 新特性
My first language was Java, and learning JavaScript threw me for a bit of a loop. How did I create a class? Or inheritance? What about public and private properties and methods? Many of the recent updates to JavaScript that make object oriented programming much easier.
我使用的第一門語言是 Java，學習 JavaScript 的過程使我大吃一驚。我該怎麼建立一個類？又要怎麼實現繼承？public 和 private 屬性和方法呢？JavaScript 最近釋出的許多更新使得這些面向物件程式設計變得更加容易。
I can now createclasses, that work like I expect them to, complete with constructors, getters and setters, static methods and public properties.
現在我可以建立類了，就像我所希望的那樣，有構造器、getter、setter、靜態方法和開放屬性。
Thanks to V8 7.2, which ships with Chrome 72, you can now declare public class fields directly in the class definition, eliminating the need to do it in the constructor.
感謝 V8 7.2——它是隨著 Chrome 72 釋出的，現在我們可以直接在 class 定義中宣告開放性例項欄位了，再不用在構造器中來做這件事了。
class Counter {
_value = 0;
get value() {
return this._value;
}
increment() {
this._value++;
}
}
const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1
複製程式碼
Support for private class fields is in the works!
私有例項欄位的支援工作正在進行中！
More details are in Mathias’s article onclass fields for more details.
關於例項欄位的更多資訊可以通過 Mathias 的文章進行了解。
User Activation API 使用者啟用 API
Remember when sites could automatically play sound as soon as the page loaded? You scramble to hit the mute key, or figure out which tab it was, and close it. That’s why some APIs require activation via a user gesture before they’ll work. Unfortunately, browsers handle activation in different ways.
還記得網站在頁面載入完就可以自動播放聲音的那些時光嗎？你慌張地去點選靜音鍵；或者慌張地找尋那個標籤並關閉它。這也是為什麼有些 API 需要使用者手勢 (user gesture) 的參與才能開始工作的原因。不過，各家瀏覽器對於處理啟用 (activation) 的方式卻又各異。
Chrome 72 introduces User Activation v2, which simplifies user activation for all gated APIs. It’s based on a newspecification that aims to standardize how activation works across all browsers.
Chrome 72 引入了 User Activation v2，簡化了。
There’s a new userActivation property on both navigator and MessageEvent , that has two properties: hasBeenActive and isActive :
navigator 和 MessageEvent 上都新增了一個 userActivation 屬性，這個屬性上又有兩個屬性：
-
hasBeenActiveindicates if the associated window has ever seen a user activation in its lifecycle.hasBeenActive表示在其所關聯的 window 的生命週期中是否已經有過“使用者啟用”。 -
isActiveindicates if the associated window currently has a user activation in its lifecycle.isActive表示在其所關聯的 window 的生命週期中當前是否有“使用者啟用”
More details are in Making user activation consistent across APIs
瞭解更多，檢視" Making user activation consistent across APIs "
用 Intl.format 來本地化列舉的表達
I love the Intl APIs, they’re super helpful for localizing content into other languages! In Chrome 72, there’s a new .format() method that makes rendering lists easier. Like other Intl APIs, it shifts the burden to the JavaScript engine, without sacrificing performance.
我喜歡 Intl API，他們對於將內容本地化為其他語種非常有用！在 Chrome 72 中，新增了一個用於簡化表達列舉的 .format() 方法。和 Intl 的其他 API 一樣，這個 API 也是將負擔轉移到了 JavaScript 引擎上，不再需要犧牲效能。
Initialize it with the locale you want, then call format , and it’ll use the correct words and syntax. It can do conjunctions - which adds the localized equivalent of and (and look at those beautiful oxford commas). It can do disjunctions - adding the local equivalent of or . And by providing some additional options, you can do even more.
用一個 locale 對他進行初始化，然後呼叫 format 方法，它就會採用正確的詞彙和語法。它可以用來表達並聯關係詞“和”的本地化版本。也可以用來表達選擇關係詞“或的本地化版本。如果再指定一些額外的選項的話，你還可以做更多的事。
const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'
複製程式碼
Check out theIntl.ListFormat API post for more details!
檢視Intl.ListFormat API 這篇貼文了解更多！
更多
These are just a few of the changes in Chrome 72 for developers, of course, there’s plenty more.
還有一些是針對開發人員的，當然，同樣也不止列舉的這些。
-
Chrome 72 changes the behavior of
Cache.addAll()to better match the spec. Previously, if there were duplicate entries in the same call, later requests would simply overwrite the first. To match the spec, if there are duplicate entries, it will reject with anInvalidStateError.為了更好地貼合規範，Chrome 72 調整了
Cache.addAll()的行為。在這之前，在單次呼叫中，如果在存在重複的條目，後面的會覆蓋掉前面的。為了貼合規範， 如果存在重複的條目，它將用一個InvalidStateError錯誤拒絕 (reject) 。 -
Requests for favicons are now handled by the service worker, as long as the request URL is on the same origin as the service worker.
對於網站小圖示 (favicon) 的請求，現在也會被 service worker 進行處理了——只要請求的 URL 的源 (origin) 與 service worker 一致。