RichTalk 快报 第 1 期

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fk7gDd4T-1655176625182)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fb27e9c9ff0466eb785b142a2fb465d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

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

头条

比 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 项更新:

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

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

image.png 为什么性能这么快,主要是下面三个方面:

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

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

动态

美国互联网巨头现在在做什么?

What’s new in GitHub Discussions: Organization Discussions, polls, and more

Rome Formatter 发布第一个版本

esbuild 0.14.31 开始

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值