Headless 组件即无 UI 组件，框架仅提供逻辑，UI 交给业务实现。这样带来的好处是业务有极大的 UI 自定义空间，而对框架来说，只考虑逻辑可以让自己更轻松的覆盖更多场景，满足更多开发者不同的诉求。

proposal-extractors 是一个关于解构能力增强的提案，支持在直接解构时执行自定义逻辑。概述 {代码...} 以上就是解构带来的便利，如果没有解构语法，相同的实现我们需要这么做： {代码...} 但上面较为原始的方法可以在对象赋值时进行一些加工，比如： {代码...} 解构语法就没那么简单了，想要实现类似的效果，需要退化到...

解决业务代码的 !important 问题。为什么业务代码需要用 !important 解决问题？因为 css 优先级由文件申明顺序有关，而现在大量业务使用动态插入 css 的方案，插入的时机与 js 文件加载与执行时间有关，这就导致了样式优先级不固定。

原文按照 “如何解决无法做单测的问题、统一依赖注入的入口、如何自动保证依赖顺序正确、循环依赖怎么解决、自上而下 vs 自下而上编程思维” 的思路，将依赖注入从想法起点，到延伸出来的特性连贯的串了起来。

SolidJS 是一个语法像 React Function Component，内核像 Vue 的前端框架，本周我们通过阅读 Introduction to SolidJS 这篇文章来理解理解其核心概念。

可能一些同学会认为前端比较简单而不需要架构，或者因为前端交互细节杂而乱难以统一抽象，所以没办法进行架构设计。这个理解是片面的，虽然一些前端项目是没有仔细考虑架构就堆起来的，但这不代表不需要架构设计。任何业务程序都可以通过代码堆砌的方式实现功能，但背后的可维护性、可拓展性自然也就千差万别了。

pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。

去重需要不断递归产生去重后结果，因此需要一个辅助变量 R 配合，并把 T 用 infer 逐一拆解，判断第一个字符是否在结果数组里，如果不在就塞进去：

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 57~62 题。精读Trim Right实现 TrimRight 删除右侧空格： {代码...} 用 infer 找出空格前的字符串递归一下即可： {代码...} 再补上测试用例的边界情况，\n 与 \t 后就是完整答案了： {代码...} Without实现 Without<T, U>，从数组 T 中移除...

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 49~56 题。精读Flip实现 Flip<T>，将对象 T 中 Key 与 Value 对调： {代码...} 在 keyof 描述对象时可以通过 as 追加变形，所以这道题应该这样处理： {代码...} 由于 Key 位置只能是 String or Number，所以 T[K] 描述 Key 会显示错误，我...

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 41~48 题。精读ObjectEntries实现 TS 版本的 Object.entries： {代码...} 经过前面的铺垫，大家应该熟悉了 TS 思维思考问题，这道题看到后第一个念头应该是：如何先把对象转换为联合类型？这个问题不解决，就无从下手。对象或数组转联合类型的思...

TS 没有 “普通” 的运算能力，但涉及数字却有一条生路，即 TS 可通过 ['length'] 访问数组长度，几乎所有数字计算都是通过它推导出来的。

首先要思考 Diff 的计算方式，A 与 B 的 Diff 是找到 A 存在 B 不存在，与 B 存在 A 不存在的值，那么正好可以利用 Exclude<X, Y> 函数，它可以得到存在于 X 不存在于 Y 的值，我们只要用 keyof A、keyof B 代替 X 与 Y，并交替 A、B 位置就能得到 Diff：

所以这题如果能 “递归触发联合类型分配率”，就有戏解决啊。但触发的条件必须存在两个泛型，而题目传入的只有一个，我们只好创造第二个泛型，使其默认值等于第一个：

该题难点不在 Promise 如何处理，而是在于 { [K in keyof T]: T[K] } 在 TS 同样适用于描述数组，这是 JS 选手无论如何也想不到的：

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 1~8 题。精读Get Return Type实现非常经典的 ReturnType<T>： {代码...} 首先不要被例子吓到了，觉得必须执行完代码才知道返回类型，其实 TS 已经帮我们推导好了返回类型，所以上面的函数 fn 的类型已经是这样了： {代码...} 我们要做的就...

TS 强类型非常好用，但在实际运用中，免不了遇到一些难以描述，反复看官方文档也解决不了的问题，至今为止也没有任何一篇文档，或者一套教材可以解决所有犄角旮旯的类型问题。为什么会这样呢？因为 TS 并不是简单的注释器，而是一门图灵完备的语言，所以很多问题的解决方法藏在基础能力里，但你学会了基础能力又不一定能...

网页渲染会经历 DOM -> CSSOM -> Layout(重排 or reflow) -> Paint(重绘) -> Composite(合成)，其中 Composite 在 精读《深入了解现代浏览器四》 详细介绍过，是在 GPU 进行光栅化。

造轮子就是应用核心原理 + 周边功能的堆砌，所以学习成熟库的源码往往会受到非核心代码干扰，Router 这个 repo 用不到 100 行源码实现了 React Router 核心机制，很适合用来学习。

useEvent 要解决一个问题：如何同时保持函数引用不变与访问到最新状态。本周我们结合 RFC 原文与解读文章 What the useEvent React hook is (and isn't) 一起了解下这个提案。借用提案里的代码，一下就能说清楚 useEvent 是个什么东西： {代码...} onClick 既保持引用不变，又能在每次触发时访问到最新的 text 值。为什...

每个 JS 执行引擎都有自己的实现，我们这次关注 V8 引擎是如何实现数组的。本周主要精读的文章是 How JavaScript Array Works Internally?，比较简略的介绍了 V8 引擎的数组实现机制，笔者也会参考部分其他文章与源码结合进行讲解。概述JS 数组的内部类型有很多模式，如：PACKED_SMI_ELEMENTSPACKED_DOUBLE_ELEMENTSPACK...

关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。

Awaited 可以将 Promise 实际返回类型抽出来，按照名字可以理解为：等待 Promise resolve 了拿到的类型。下面是官方文档提供的 Demo：

SQL grouping 解决 OLAP 场景总计与小计问题，其语法分为几类，但要解决的是同一个问题：ROLLUP 与 CUBE 是封装了规则的 GROUPING SETS，而 GROUPING SETS 则是最原始的规则。为了方便理解，让我们从一个问题入手，层层递进吧。底表以上是示例底表，共有 8 条数据，城市1、城市2 两个城市，下面各有地区1～4，每条数据都...

窗口函数形如： {代码...} 有两个能力：当表达式为 rank() dense_rank() row_number() 时，拥有分组排序能力。当表达式为 sum() 等聚合函数时，拥有累计聚合能力。无论何种能力，窗口函数都不会影响数据行数，而是将计算平摊在每一行。这两种能力需要区分理解。底表以上是示例底表，共有 8 条数据，城市1、城市2 两个城...

明显可以看出，简单表达式只是搜索表达式 a = b 的特例，因为无法书写任何符号，只要条件换成 a > b 就无法胜任了，而搜索表达式不但可以轻松胜任，甚至可以写聚合函数。

为什么子查询叫做复杂查询呢？因为子查询相当于查询嵌套查询，因为嵌套导致复杂度几乎可以被无限放大（无限嵌套），因此叫复杂查询。下面是一个最简单的子查询例子：

这看上去是个幼稚的问题，但我们还是一步步思考一下。数据以行为粒度存储，最简单的 SQL 语句是 select * from test，拿到的是整个二维表明细，但仅做到这一点远远不够，出于以下两个目的，需要 SQL 提供聚合函数：

SQL 属于声明式编程语言，而现代通用编程语言一般都是命令式的。但是不要盲目崇拜声明式语言，比如说它未来会代替低级的命令式语言，因为声明式本身也有它的缺点，它与命令式语言也有相通的地方。

但 Markdown 是否应该成为文本编辑领域的默认技术选型呢？答案是否定的。我找到了一篇批判无脑使用 Markdown 作为技术选型的好文 Thoughts On Markdown，它提到 Markdown 在标准化、结构化、组件化都存在硬伤，如果你真的想做一个现代化的文本结构编辑器，不要采用 Markdown。