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/