Tuateam技術週刊-45期

1、 Firefox 66: The Sound of Silence

• 用戶決定頁面的音視頻是否自動播放
• 滾動錨定 火狐如今實現了滾動錨定，讓視口內容再也不因視口上方 DOM 元素的高度變化而產生跳動。
• Touch Bar支持
• Tab Search - 支持tab搜索
• 新DOM API：getDisplayMediaAPI 新的getDisplayMediaAPI支持Web上的屏幕共享，相似於getUserMedia提供對網絡攝像頭的訪問。生成的流能夠在本地處理或經過WebRTC在網絡上共享。
• Firefox 66 將使用 indexedDB 做爲數據存儲方式，放棄使用傳統的 JSON 文件。 擴展的數據將會自動從 JSON 文件遷移到 indexedDB，開發人員不須要作任何操做，整個過程在 Firefox 66 安裝過程當中進行。使用 storage.local() API 的擴展會體會到其優勢，特別當存儲大結構的小更改時。
• 更快的瀏覽速度，減小內存佔用。 對於普通的用戶來講，這種變化意味着擴展將會網頁加載得更快，同時減小 Firefox 內存佔用量。由於當你打開更多的標籤時，瀏覽器會消耗愈來愈多的內存，例如 Google Chrome。

2、 一、Chrome 73中的新功能

中文文檔

• 支持硬件多媒體按鈕 用戶將可以經過鍵盤上的多媒體鍵控制 Chrome 中播放的音視頻內容，指令包括跳過播放列表、播放、暫停、前一曲目、下一曲目、先後向滾動等。
• 可跟隨系統的黑暗主題
• 自動畫中畫功能 自動畫中畫（Automatic Picture-in-Picture）適用於已經安裝到系統上的PWA應用程序。Chrome 70版本中引入了在Windows 10平臺安裝PWA應用的功能，從網頁應用的交互體驗接近於原生應用，能夠將其固定到開始菜單，而且經過Action Center來得到原生通知。不過在此前只有用戶手動方式才能將視頻切換至畫中畫模式。啓用自動畫中畫功能以後，應用中嵌入的視頻元素能夠自動激活，而且會根據用戶焦點自動離開畫中畫狀態。

Chrome 73 開發者工具新特性

• Inspect 模式下的樣式屬性 在 Inspecting (審視/檢查/檢視。不一樣瀏覽器叫法不同——譯註) 一個元素節點時，開發者工具將展現出一個包含了常見的比較重要的樣式屬性，如 font、margin、padding。

  

• 導出代碼覆蓋報告數據 分析頁面加載過程當中有多少代碼被用到並導出這些數據爲JSON文件

3、ES10 功能徹底指南

目前ES10仍然只是一個草案，但它確實添加了一些有趣的東西。

1. BigInt - 任意精度整數

BigInt是第7種原始類型

typeof 10;
⇨ 'number'
typeof 10n;
⇨ 'bigint'
複製代碼

2. string.prototype.matchAll()

+它返回一個迭代器而不是數組，迭代器自己頗有用。

+可使用擴展運算符...將迭代器轉爲數組。

+它避免使用帶 /g標誌的正則表達式...當從數據庫或外部源檢索未知的正則表達式並與古老的RegEx對象一塊兒使用時很是有用。

3. 動態 import

element.addEventListener('click', async () => {
    const module = await import('./api-scripts/button-click.js')
    module.clickEvent()
})
複製代碼

4. Array.flat() - 扁平化多維數組

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();               // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]
複製代碼

5. Array.flatMap() - map後扁平化

array.flatMap(v => [v, v * 2])
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
複製代碼

6. Object.fromEntries() - 將鍵值對列表轉換爲對象

let obj = { apple : 10, orange : 20, banana : 30 };
let entries = Object.entries(obj);
entries;
(3) [Array(2), Array(2), Array(2)]
 0: (2) ["apple", 10]
 1: (2) ["orange", 20]
 2: (2) ["banana", 30]
let fromEntries = Object.fromEntries(entries);
{ apple: 10, orange: 20, banana: 30 }
複製代碼

7. String.trimStart() & String.trimEnd() - 刪除字符串頭部和尾部空格

let greeting = " Space around ";
greeting.trimEnd();   // " Space around";
greeting.trimStart(); // "Space around ";
複製代碼

8. New Function.toString() - 標準化全部對象和內置函數的字符串表示

function () { console.log('Hello there.'); }.toString();

⇨ function () { console.log('Hello there.'); }
複製代碼

9. 可選的Catch Binding

在ES10中，Catch Error Binding是可選的 你如今能夠跳過 error變量：

try {
    JSON.parse(text);
    return true;
}
catch
{
    return false;
}
複製代碼

10. 標準化的 globalThis 對象

ES10以前全局 this沒有標準化。

生產代碼中，你必須手動添加以下代碼來標準化多個平臺的全局對象。

var getGlobal = function () {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};
複製代碼

但即便這樣也並不老是奏效。因此 ES10添加了 globalThis對象，從如今開始應該在任何平臺上訪問全局做用域：

// Access global array constructor
globalThis.Array(0, 1, 2);
⇨ [0, 1, 2]

// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };

console.log(globalThis.v);
⇨ { flag: true }
複製代碼

11. Hashbang 語法

基本上統一了JavaScript在服務器端的執行方式。

$ ./index.js
複製代碼

代替：

$ node index.js
複製代碼

12. ES10 Classes: private, static & public members

新的語法字符#（hash tag）如今直接在類主體做用域以及 constructor和類方法裏被用來定義 variables， functions， getters和 setters

我的認爲可讀性差，可是語法類C++

class Raven extends Bird {
    #state = { eggs: 10};
    // getter
    get #eggs() {
        return state.eggs;
    }
    // setter
    set #eggs(value) {
        this.#state.eggs = value;
    }
    #lay() {
        this.#eggs++;
    }
    constructor() {
        super();
        this.#lay.bind(this);
    }
    #render() {
        /* paint UI */
    }
}
複製代碼

4、 2019年大前端技術趨勢深度解讀

三大框架標準化

2014 年到 2018混戰後， React/Vue/Angular三足鼎立。不管 React 發佈 v16，增長 Fiber 和 Hooks，仍是 Vue 3.0 發佈，支持原生 Class 的寫法，AngularJS 又發佈了 v6 和 v7 兩個版本，三大框架從寫法上愈來愈像，其實最終都是朝着 W3C WebComponents 標準走。

點評：標準化一直是技術發展的大趨勢。

應用層封裝進入爆發期

框架和工程化基本探索穩定後，你們就開始思考如何更好的用，更簡單的用。目前，各家大廠都在前端技術棧思考如何選型和下降成本，統一技術棧。好比咱們團隊的tua等

• 零配置就是默認選型都給你作好了。
• 開箱即用就是技術棧都固化了。
• 約定大於配置，開發模式也固化好了。

點評：下降成本，統一技術棧帶來的好處不少，適合業務發展。

PWA 進入穩按期 - (Progressive web apps，漸進式Web 應用）運用現代的Web API 以及傳統的漸進式加強策略來建立跨平臺Web 應用程序。

PWA 和 native app（移動應用）的核心區別在於如下幾點：

• 安裝：PWA 是一個不須要下載安裝便可使用的應用。
• 緩存使用：native app 主要是對 sqlite 緩存，以及文件讀寫操做，而 PWA 對緩存數據庫操做支持的很是好，足以應對各類場景。
• 基本能力補齊，好比推送。

PWA 的一些關鍵點。

• 通用本地存儲的解決方案 Workbox，Workbox 背後則是 Service Worker 和 Cache API 等技術和標準在驅動。
• PWA 桌面版，2018 年 Google IO 大會上，微軟宣佈 win10 全力擁抱 PWA，經過爬蟲爬取 PWA 頁面，並將其轉換爲 Appx，繼而在其應用商店裏提供應用，體驗和原生 Native 應用很是相近。

點評： 5G時代的到來，web離線獲取是趨勢

小程序火爆

點評：野蠻發展期，與pwa同樣，隨着5G時代的到來，如何發展還有待檢驗

TypeScript權重變高

由於隨着前端團隊變大，規模化編程也必然依賴類型系統和麪向對象的。 TypeScript 落地很好，包容性更好：React 對.tsx 支持很是好，Vue 從 v2.5.0 以後對 ts 支持就很是好，Node.js（尤爲是 Egg.js、midway）對 ts 支持也很是好。

WebAssembly

WebAssembly 是一種新的字節碼格式，目前主流瀏覽器都已經支持 WebAssembly。 和 JS 須要解釋執行不一樣的是，WebAssembly 字節碼和底層機器碼很類似，能夠快速裝載運行，所以性能相對於 JS 解釋執行而言有了極大的提高。 也就是說 WebAssembly 並非一門編程語言，而是一份字節碼標準，須要用高級編程語言編譯出字節碼放到 WebAssembly 虛擬機中才能運行， 瀏覽器廠商須要作的就是根據 WebAssembly 規範實現虛擬機。

有了 WebAssembly，在瀏覽器上能夠跑任何語言。從 Coffee 到 TypeScript，到 Babel，這些都是須要轉譯爲 js 才能被執行的，而 WebAssembly 是在瀏覽器裏嵌入 vm，直接執行，不須要轉譯，執行效率天然高得多。

應用例子：《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》，即經過 WebAssembly，讓不少年代久遠的 C++ 代碼在 Web 上能夠運行，而且保證了執行效率。web.autocad.com/