前端技术双周刊#9-2021.10.27

JavaScript

• How to Fill an Array with Initial Values in JavaScript
  看似简单的问题可能也有一些陷阱

• 怎样判断一个引用类型变量是 Proxy 的实例？
  通常大家可能都能想到用 instanceof 操作符做判断，但是却不能符合预期。本文提出了一种解决办法，借助 Symbol.toStringTag 方法和 Proxy 可以代理自身的特性完成判断。Proxy 和 Symbol 都属于元编程的范畴，能力很强大。

• Naive UI 组件的源码解读
  本文一层层源码级剖析了 Naive UI 的 Button 完整过程，可以发现对于组件库这个领域来说，绝大部分的构思都是花在如何设计可扩展的样式系统上，从 Ant Design、Element UI 使用 Less 来组织样式系统，再到 Material Design 使用 CSS-in-JS，如 styled-components 来组织样式系统，再到现在 Naive UI 使用 CSS Render 来组织样式系统。大家在组件库的开发实践中也可以从中参考借鉴。

• clean-code-javascript
  Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.

CSS

• 重新构想原子化 CSS
  文章从 Tailwind CSS / Windi CSS 的利弊出发，介绍了自己的原子化 CSS 引擎 UnoCSS，拥有几个特点：直观且完全可定制，支持可变修饰配置，提供大量预设并且支持自定义预设、性能强大等。文章中作者深入思考和动手实践能力值得学习。

Node.js

• patch-package
  patch-package 可以帮你『优雅』的修改 node_modules 下的代码

• Node.js v17来了，看看有哪些新功能
  Node.js v17 版本已发布，取代了 v16 做为当前版本，新的 v17 版本提供了一些新功能：基于 Promise 的其它核心模块 API、错误堆栈尾部增加 Node.js 版本信息、OpenSSL 3.0 支持、v8 JavaScript 引擎更新至 9.5。Node.js 的奇数版本不是稳定的版本（例如，当前的 Node.js v17 ），它的生命周期很短，可以尝鲜，不过不推荐用于生产环境。

端智能

• 说一说 Web 端侧 AI
  一篇浅尝辄止的入门文章，带你了解端智能的概念、应用场景、优势和局限性，Web 端智能的架构与流程等内容。

前端框架

• React 全新文档来了
  React 官方文档内容过于陈旧。从去年10月开始，React 团队的 Rachel Nabors 开始推进新文档的编写。时隔一年，React 新文档 Beta 版终于上线了。此外，React 全新文档的技术选型也值得我们借鉴。

算法

• SELF-PARKING CAR IN 500 LINES OF CODE
  如何用500行 TS 代码实现自动泊车功能？在这篇文章中，作者从0到1介绍了如何使用遗传算法，在500行代码以内实现一个简单场景下的自动泊车功能。文章内不仅提供了详细的代码解释，完整的代码实现，还提供了一个在线模拟器直观地查看每一代遗传算法的训练结果。

• 音频可视化：采样、频率和傅里叶变换
  在很多音乐播放器中经常会看到一排随音乐跳动的柱子动画效果，大家有没有想过该如何实现呢？好奇的话请戳

开源产品

• 微软发布 vscode.dev
  和前段时间 github 推出的github.dev有点像，不过更纯粹，不会和 github 账户绑定

• Semi Design
  抖音系推出的面向企业级应用的设计系统

拓展阅读

• 前端 DDD 思考
  复杂的业务系统无论前端还是后端，都面临着巨大的挑战，除了系统本身的功能之外，最大的风险在于业务逻辑需要被准确实现的同时，给研发团队的实现时间却很紧张，紧随而来的系统的代码在长时间迭代中，越来越难以维护。作者受到 DDD 的启发，探索了 DDD 在前端领域的可能性，给出了一套标准建模步骤，并结合 Mobx 和 React 说明如何实现。对于具有复杂业务场景的前端需求具有很大的参考价值。

• CORS 讲解
  CORS 的详细介绍及正确的使用姿势

• 从 Web 图标演进历史看最佳实践
  在目前组件化开发的大背景下，通过分析不同实现方案的优缺点，建立起一套当下图标的最佳实践，减少了流程中的沟通和容易出错的人工操作，高效地达成了设计和实现的一致性。

• 做一名真正的软件工程师
  章老师近期的分享精华

• 关于系统复杂度的碎碎念
  从阅读 Complexity has to live somewhere 和《a philosophy of software design》联想到的如何管理系统复杂度问题。1. 系统可以设计得复杂，只要复杂的部分不常修改就可以了。2. 经常修改的部分与不经常修改的部分可以进行拆分。3. 重复的工作一定可以配置化。4. 工程师不应该抗拒复杂度