前端周刊第十五期

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

大事件

• 2021 年前端性能清单（PDF、Apple Pages、MS Word）——Web 性能是一个棘手的问题，不是吗？我们如何真正知道我们在性能方面的立场，以及我们的性能瓶颈到底是什么？是昂贵的 JavaScript、缓慢的网络字体交付、沉重的图像还是缓慢的渲染？我们是否对 tree-shaking、范围提升、代码分割以及所有带有交叉点观察器、渐进式水化、客户端提示、HTTP/3、服务工作者和 - 哦我的 - 边缘工作者的花哨的加载模式进行了足够的优化？而且，最重要的是，我们甚至从哪里开始提高绩效，我们如何建立长期的绩效文化？

• JavaScript 运算符的“搜索引擎” ——快速：尽可能多地命名运算符！大概十点左右吧？该站点涵盖了大约50个内容，并对每个内容进行了快速解释。

• TypeScript 4.7 Beta 发布——Node.js 的 ES 模块支持现在是一项官方功能，您可以指定package.jsonJS 文件是解释为 ES 模块还是 CommonJS 模块。如果您愿意，也支持扩展.mjs。.cjs还有改进的函数推理、实例化表达式，您可以typeof在私有字段上使用。最终的 TS 版本往往会从 beta 版开始快速发布，因此预计很快会发布 4.7 最终版。

• “通过复制更改数组”：四种新的非破坏性数组方法——Axel介绍了另一个正在进行的 ECMAScript 提案（该提案处于第 3 阶段），该提案将介绍一些非破坏性方法来反转、排序、拼接, 并设置（某种）数组元素。

文章

1. Vue3全局Api支持tree-shaking后的一些变更 — 在 Vue 3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。因此，全局 API 现在只能作为 ES 模块构建的命名导出进行访问。

2. React18正式版源码级剖析 — React18正式版终于来了，哪个是你期待的，Concurrent、Suspense、transitions还是新的Hooks API？

3. chrome插件最新版本开发指南来了 - 网上关于chrome插件开发的教程有不少，可惜都是基于第二版本(manifest V2)，chrome官方在2020年11月就推出第三版(manifest V3)的开发规范了，但是感觉国内很少有插件基

4. Fetch 与 Axios：获取 HTTP 资源的比较 - 对长期存在但边缘的旧Axios客户端与使用 Fetch API的初学者级比较。

5. 使用 D3 构建交互式迷你图 - 能够构建数据可视化对任何人来说都是一项得心应手的技能——这是一项简单而优雅的技能。

6. 如何使用 Nuxt 构建由 CMS 提供支持的博客 - 使用无头 CMS（在本例中为 ButterCMS）和Nuxt Vue.js 框架创建一个没有服务器的博客。

7. A Guide to Optimizing JavaScript for Quick Page Loads - 涉及一些现代方法，包括 Astro、Qwik 和 Partytown。

8. 如何检测 React 应用程序中的“长按”手势 - 如何检测 React 应用程序中的“长按”手势

框架发布

1. Shepherd 9.1 – 为您的应用创建导览。
2. Jasmine 4.1 – JS 测试框架。
3. PouchDB 7.3 – 受 CouchDB 启发的同步数据库。
4. Oclif 3.0 – Node.js CLI 应用程序框架。
5. Opal 1.5 – Ruby 到 JavaScript 转译器。
6. react-hooks-testing-library 8.0
7. 创建 React App 5.0.1 - 提高了 React 18 的兼容性。

代码和工具

1. Wild Wild Path: Object Property Paths with Wildcards and Regexps：一种通过支持通配符和正则表达式的基于字符串的查询来访问对象（可以深度嵌套）中属性的狂野方式。你需要看一些例子才能真正理解这个想法。

2. YouTube.js 1.4：围绕 YouTube 的私有 API 的包装器： 描述的方式，我怀疑你的里程可能会有所不同.. 但这是一个有趣的想法，并且使用与 YouTube 客户端相同的 API。

3. jc：将流行 CLI 工具的输出转换为 JSON 的 CLI 工具：这是用Python编写的，但可能对 JavaScript 开发人员有用，因为它可以转换文件或 50 多种其他工具（包括dig、du、iostat和lsof）成易于处理的 JSON。

4. React Admin 4.0：B2B 应用程序的管理面板：一个框架，用于在您选择的后端（REST、GraphQL 等，或者您可以编写自己的适配器）上构建基于浏览器的“管理”应用程序。如果您想现场观看，这里有一个演示。MIT 许可，但如果需要支持，也有专业版本。GitHub 存储库。

5. nextjs-blog-theme：使用 Next.js 和 Tailwind 构建的可自定义博客启动器：包括深色和浅色主题以及对 MDX 的支持。在此处尝试现场演示（页面底部的深色模式开关）。

6. scroll-snap：一个可定制的“Scroll Snap”实现：一个仍在维护的旧项目。用于requestAnimationFrame()60fps 滚动性能并且没有任何依赖关系。在这里试试。

7. Gladys Assistant：隐私优先的开源家庭助手：它可以在任何 Linux 机器（包括 Raspberry Pi）上运行，并在后台使用 Node。