前端周刊第三十六期

前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表，欢迎大家关注、转载。
如果外链不能访问，关注公众号「前端每周看」，里面有解决办法

大事件

• MemLab：用于查找 JavaScript 内存泄漏的框架—— Facebook（抱歉， Meta）一直在使用 MemLab 对其主要 SPA 的内存使用进行重大改进。现在他们已经开源了这个工具（它本身是用 TypeScript 编写的），希望其他人也能实现类似的改进。

• 你不知道的 JavaScript API——这是一个大胆的标题，因为你们中的很多人至少都听说过这些 API，但它仍然是一个很好的总结，可以让你了解 Web 平台提供的内容。涵盖的 API 包括页面可见性、Web 共享和广播频道 API。

• 创建现代 npm 包的最佳实践——使用当前最佳实践创建自己的 npm 包的“截至 2022 年”的分步演练。它非常彻底，当然值得重新审视，即使您已经构建了一个包。不过，与往常一样，有不止一种方法可以做到这一点，并且可以根据需要将其他工具（如np ）加入其中。

文章

1. 调用不带括号的函数的第七种方法 — 如果你对竟然有六种方法感到惊讶，那么这是给你的。这些几乎完全是“技巧”，但在安全性或清理用户提供的代码方面可能很重要。

2. 2022 年 HTML 表单有什么新变化？ — 使用您可能错过的表单的一些有用的补充……

3. 成功使用多窗口 WebGL 画布的秘诀 — 这是技术性的，我们大多数人不需要深入挖掘，但它是对使用屏幕外画布使用单独的工作上下文进行渲染的巧妙探索——然后这些可以用于其他选项卡或浏览器窗口。

4. 为什么type="number"输入是最差的输入 — 认为网络表单有你的号码？如果您使用过input type=”number”，您可能会惊讶地发现它没有。

5. useSyncExternalStore：被低估的 React Hook？ — 订阅外部数据源的挂钩。但是你知道它也可以用来阻止过度返回React 钩子触发不必要的重新渲染吗？

框架发布

1. Spacetime 7.2 – 轻量级时区库。

2. React Router 6.4
   ↳ 现在具有向后移植的 Remix 功能。

3. Fastify 4.6
   ↳ 快速、低开销的 Node 网络框架。

4. Preact 10.11
   ↳ 3KB 使用相同 API 的 React 替代方案。

5. Cypress 10.8
   ↳ 轻松测试浏览器中的任何内容。

6. React Grid Gallery 1.0
   ↳ 对齐的图片库组件。

7. sablejs 1.1
   ↳ ES5.1 用纯 JS 编写的解释器。

8. Crunker 2.0
   ↳ 使用 Web Audio API 连接音频文件。

9. ka-table 7.6
   ↳ 使用排序、过滤等对表格组件进行反应。

10. d3-graphviz 4.4
    ↳ Graphviz DOT 渲染和动画过渡。

代码和工具

1. npm-check-updates：package.json将依赖项更新到最新版本：也就是说，与指定版本相反。一个特别简洁的功能是-i交互模式，因此您可以查看潜在的升级，然后逐一进行操作。

2. SafeQL：用于 SQL 查询的 ESLint 插件：聪明的想法。它与您的数据库挂钩，然后指导您在 JavaScript 代码中编写 SQL 查询时可能犯的错误。Postgres 只是现在，但支持任何客户端.. 无论是 Prisma、pg、Sequelize 还是其他。

3. Theatre.js 0.5：用于 Web 的 Hackable Motion Design：可用于以编程方式和可视化方式为使用 Three.js、React Three Fiber、HTML/SVG 等创建的 3D 对象设置动画，甚至“动画”变量值。v0.5 引入了 3D 场景编辑和复杂的关键帧。