前端技术双周刊-2021.7.7

JavaScript

ES2021 Now Approved; Here’s the Features (Quickly)
1.支持逻辑赋值运算符 Logical Assignment Operators (&&= ||= ??=), 2. 支持数字分隔符 Numeric Separators (1_000), 3. 支持 Promise.any & AggregateError, 4. 新增 String.prototype.replaceAll, 5. 新增 WeakRefs & FinalizationRegistry Objects

Promise 和 async/await 的异常处理，原来还有这种坑！
Promise 和 async/await 在 JavaScript、TypeScript 中已经很常见了，但你有遇到过这个报错(Uncaught in promise)吗？这篇文章为你分析此类问题的成因和解决办法。

JS 是怎样运行起来的
有的同学可能已经知道，JS 是通过 JS 引擎运行起来的，JS 引擎有很多种，比如 Chrome 使用的 V8 引擎，Webkit 使用的是 JavaScriptCore，React Native 使用的是 Hermes。今天我们主要来分析一下比较主流的 V8 引擎是怎样运行 JS 的。
编者注：一篇浏览器V8引擎执行 JS 的入门级流程讲解。

JavaScript 事件循环：从起源到浏览器再到 Node.js
很多文章都在讨论事件循环 (Event Loop) 是什么，而几乎没有人讨论为什么 JavaScript 中会有事件循环。博主认为这是为什么很多人都不能很好理解事件循环的一个重要原因 —— 知其然不知其所以然。所以本文试图抛砖引玉，从一些更溯源的方式来与大家探讨 event loop，希望大家能从中有些收获。

Nodejs

POSIX Threads Programming
This tutorial is ideal for those who are new to parallel programming with pthreads. A basic understanding of parallel programming in C is required. For those who are unfamiliar with Parallel Programming in general, the material covered in EC3500: Introduction to Parallel Computing would be helpful.
编者注：一个讲解 pthreads 的教程，Node.js 中的 worker_thread 在 Linux 中就是使用的 pthreads 来实现的。了解 pthreads 的特性可以帮助我们更好的使用 worker_thread。

10 Best Practices to Containerize Node Web Applications with Docker
Production-grade guidelines for building optimized and secure Node-based Docker images whether for microservices, server-side rendering, or stand alone apps.

工程化

JavaScript Code Coverage
Code coverage provides information about whether, and optionally how often certain parts of an application have been executed. It’s commonly used to determine how thoroughly a test suite exercises a particular codebase.
编者注：可能与很多人的认识不同，V8 自身支持了代码覆盖率的检测。本文讲解了 V8 中代码覆盖率检测的两种方式，以及为什么函数层面的覆盖率检测是没有损耗的。

如何设计并开发一个好的脚手架
传统（事实上大一点点的公司都会考虑CI/CD自动化）手动操作低效、出错率高、依赖某些特定人员等。尤其在项目越来越大的时候，这些问题将更为严重，更不用谈“灰度发布”，这些点有一个就有足够的理由接着看本文，作为前端架构师就是要解决各种“效能”问题。

拓展阅读

我所理解的 Hooks API
Hooks API 从 2018 年开始进入开发者视野至今已经将近两年了，但目前还有很多同学对 Hooks 有很多的不理解和困惑。为何要从 Class API 换成 Hooks API？Hooks API 使用方法跟 Class API 有很大的区别，需要重新学习。大量的函数嵌套让“闭包陷阱”变得非常常见。我们也不难发现社区上已经有很多关于 Hooks API 的教程，甚至的其源码的分析学习。但当我们实际地到 React 的源码中学习 Hooks API 的实现方式的时候，会被其“神奇”的实现方式搞得更加一头雾水。那么我们究竟还能从什么角度去学习和理解 Hooks API 的设计模式呢？
编者注：本文从一个独特的角度帮助大家理解 Hooks API，虽然有些同学业务中可能并没有涉及到这块内容，但是仍然值得借鉴学习。

深入理解 WKWebView 系列：入门篇：WebKit 源码调试与分析，基础篇：WKWebView 加载生命周期与代理方法剖析
移动互联网时代，网页依旧是内容展示的重要媒介，这离不开 WebKit 浏览内核技术的支持与发展。在 iOS 平台下开发者们需要通过 WKWebView 框架来与 WebKit 打交道。虽然苹果官方提供了关于 WKWebView 的 API 与使用说明，但这并不能满足开发者们的需求，各类复杂场景依旧让我们焦头烂额，而解决方案却不易寻找。此时，优秀的开发者们将目光移向苹果开源的 WebKit 内核代码，试图从中寻找解惑之道，却发现依旧困难重重，坎坷不断，主要问题如下：内核源码复杂难懂：动辄几个 G 的源码，且缺乏关键代码注释与说明，跟踪分析工作量大；系统兼容分支较多，一块代码可能区分 iOS、Mac、嵌入式等分支；历史代码或实验功能较多，导致查看源码并不容易缕清逻辑。无法结合业务代码分析：异常问题往往在复杂场景下才会出现，缺乏业务代码的结合，问题无法复现

抽象泄露（Leaky Abstraction）
在 5 月 23 日 Online Meetup With Evan You 的问答环节中，Evan 在说到 low code 时提到一个概念 —— “abstraction leak”. 在前端开发过程中接触过很多内部平台和工具，包括 low code 建站平台、组件库、框架和二次封装的元框架。在这个过程中会发现一个比较普遍的现象：即便文档覆盖相对比较全面，开发者在实现或排查某一些特定的问题时仍然不可避免地需要阅读对方平台或库的源码，或了解更底层的原理。一些特定的场景下，平台或库索提供的接口、界面或规范不再适用；它们的抽象层次不再能满足业务场景要求。但是往往这些痛点并不是系统本身的管理或设计缺陷；更多的是某些应用场景下的“抽象泄漏”导致。本文翻译多篇相关英文文章，并在此基础上整合、提炼，就系统设计中的抽象层级和抽象泄漏现象进行讨论。
编者注：这篇文章给大家介绍了什么是抽象泄露，探讨了如何应对抽象泄露，以及我们在做抽象设计时应该注意些什么。将抽象泄露这个常见现象讲的很深入透彻，引人深思。

Vue 3 的 SFC Style CSS Variable Injection 提案实现的背后
在 5 月 22 日的 Vue Conf 21 上，尤大在介绍单文件组件（SFC）在编译阶段优化的部分，讲了 SFC Style CSS Variable Injection 这个提案，即

GitHub Copilot: An AI ‘Pair Programmer’
A project that GitHub has been working on in the background for some time with OpenAI. It’s a VS Code extension that uses machine learning to suggest code snippets as you type and, yes, it plays well with Node, although some of the code generated can be a little questionable. Think of it as a source of inspiration, rather than writing your code for you.

WebAssembly 2021 调研报告
WebAssembly 使用者最常使用 Rust 开发，其次是 C++ 和 AssemblyScript；WebAssembly 应用类型数量前三名为网页、游戏和 Serverless 应用；对 WebAssembly 将来特性的热度前三名为线程支持、WASI、接口类型。

React 18 将有哪些变化
可能是React15到16的不兼容变更太多，开发者们升级相当痛苦，所以很长一段时间React开发者都没有再发布新版本，而是在 v16 上集成各种新能力，16.3/16.8/16.12 几乎每隔几个版本就有一颗赛艇的新特性出现。在长达2年半的 v16 版本后，React团队发布了 v17，同时宣布这一版本的定位是一版技术改造的过渡版本，主要目标是降低后续版本的升级成本。在 v17 之前，不同版本的 React 无法混用，很重要的一个原因是之前版本中事件委托是挂在document上的，v17 开始，事件委托挂载到了渲染 React 树的根 DOM 容器中，这使多 React 版本并存成为了可能。（意味着React 17+可混用，老页面维持 v17，新页面使用v18 v19 等）。我们越来越能感受到，React的开发者把升级重点放到了「渐进升级」上，仅在v17发布了2个小版本后，v18的alpha就出现了，并且只需要用户做极小、甚至不需要改动就能让现有React APP在 v18 上工作。那么v18中有哪些新变化、新特性呢？

智能设计生产的色彩详解和应用
通过分析人眼对色彩的感知原理和对颜色感知的影响因素，结合通用的色彩模型理论，试图探讨一种覆盖不同业务场景的智能色彩体系生成方案。