RichTalk 快报第 1 期

RichTalk 是我们团队每 2 周的一次技术分享活动，前 5 分钟分享最近 2 周社区技术，接着一场技术分享

“认识你自己”、“凡事勿过度”、“妄立誓则祸近”- 《德尔斐神谕》

头条

比 eval 和 iframe 更强的新一代 JavaScript 沙箱！

mp.weixin.qq.com/s/wAI-L3we6… ShadowRealm API 是一个新的 JavaScript 提案，它允许一个 JS 运行时创建多个高度隔离的 JS 运行环境（realm），每个 realm 具有独立的全局对象和内建对象，可以想象成改进版的 eval。

包含 2 个API:

evaluate: 用于同步执行代码, 类似 eval().
importValue: 用于导入外部文件中的方法, 返回一个 Promise 对象

declare class ShadowRealm {
  constructor();
  evaluate(sourceText: string): PrimitiveValueOrCallable;
  importValue(specifier: string, bindingName: string): Promise<PrimitiveValueOrCallable>;
}
复制代码

.evaluate() 的工作原理很像 eval()：不同的是，代码是在 .evaluate() 的独立运行环境中执行的:

globalThis.realm = 'incubator realm';

const sr = new ShadowRealm();
sr.evaluate(`globalThis.realm = 'ConardLi realm'`);
console.assert(
  sr.evaluate(`globalThis.realm`) === 'ConardLi realm'
);
复制代码

.importValue() 可以直接导入一个外部的模块，异步执行并返回一个 Promise：

// main.js
const sr = new ShadowRealm();
const wrappedSum = await sr.importValue('./my-module.js', 'sum');
console.assert(wrappedSum('hi', ' ', 'richlab', '!') === 'hi richlab!');

// my-module.js
export function sum(...values) {
  return values.reduce((prev, value) => prev + value);
}
复制代码

ShadowRealms 可以用来做什么？

在 Web IDE 或 Web 绘图应用等程序中运行插件等第三方代码。
在 ShadowRealms 中创建一个编程环境，运行用户代码。
服务器可以在 ShadowRealms 中运行第三方代码。
在 ShadowRealms 中可以运行测试，这样外部的 JS 执行环境不会受到影响，并且每个套件都可以在新环境中启动（这有助于提高可复用性）。
网页抓取（从网页中提取数据）和网页应用测试等可以在 ShadowRealms 中运行。

同类方案有 eval/new Function、Web Worker、iframe、node 中的 Module vm, 与同类方案的对比在上文中的链接中可以找到。

ShadowRealm 目前尚未有落地的浏览器实现，可通过 shadowrealms-polyfill 补丁尝鲜。

扩展阅读： ShadowRealms – an ECMAScript proposal for a better eval()

精选

Umi 4 RC 11

github.com/umijs/umi-n… 包含 4 项更新:

新增命令 umi lint，包含 eslint 和 stylelint 的规则和命令
支持通过环境变量 SOCKET_SERVER 指定 socket 服务器，场景是 umi.js 和页面 url 不是同一个 server 时使用
支持 node: 前缀的 import 语法和补丁
修复项目里指定 16 及以下版本的 react 时构建报错的问题

Solid.js 就是理想中的 React

www.infoq.cn/article/J45… www.solidjs.com/ Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码。真正的既要又要还要。到底有多快，我们看看 Benchmark

为什么性能这么快，主要是下面三个方面：

直接使用浏览器的 DOM, 没有虚拟 DOM， DOM diff 一整套算法
响应式原理，精准更新对应的值
提前编译，更小的包体积，尺寸小

学习借鉴下原理挺不错的，在生产环境中使用还是算了，毕竟一个新框架前期正处于快读迭代的过程中，肯定会有一堆弃用的api。且他的生态距离 react，vue 的生态，还需要发展几年。选用一个框架，如果考量他的性能，也要考量可维护性，编码效率等…

动态

美国互联网巨头现在在做什么？ What’s new in GitHub Discussions: Organization Discussions, polls, and more Rome Formatter 发布第一个版本 esbuild 0.14.31 开始