TS 登顶第一语言；JS 最新 Temporal 时间减屎；Node 爆发反 AI 运动；CSS 将支持图片亮暗切换《前端周刊》

Web情报局
0 阅读7分钟

🌐 今日要闻

打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。

欢迎阅读《Web 周刊》，上周 Web 开发圈的主要情报包括：

  • 👍 TS 登顶 GitHub 第一语言，官宣了 最后一个 JS 主版本
  • ✅ JS 推出 Temporal 最新功能，取代 Date 时间减屎
  • 🚫 Node 社区爆发反 AI 运动，“理解债务“是 AI 编程的隐形成本
  • ☑️ CSS light-dark() 函数亮暗切换或将支持图片

PS：本文附带甜妹解说的动画视频，粉丝请搜索哔哩哔哩@Web情报局。

🎉 每周热搜

🔗 TypeScript 6.0 官宣

TypeScript 是 GitHub 去年 涨粉最快 的编程语言，并且已经赶超 JS 和 Python，成为 GitHub 第一编程语言 了。

ts1.png

TS 团队官宣 v6.0 正式发布，这是 最后一个 基于 JS 源码库的主版本，TS 7.0 开始要移植到 Go 语言了。

这个主版本涵盖了超多新功能和破坏性更新，主要包括：

  • 支持 JS 的最新功能，比如 ES2026 map.getOrInsert() 方法和 Temporal API（Stage4）
  • 爆改了大量默认编译选项，比如 target 默认是 JS 现行版（目前是 es2025），之后每年自动更新，要求最低版本为 es6，不再支持 es5
  • 废弃了超多过时功能，比如 module 只支持 ESM 和 CJS，UMD 等非主流模块通通被砍掉了

image.png

TS 6.0 是主版本更新，更多技术细节另请参阅 TS 官方博客。

🛜 官方情报

🔗 JS 推出 Temporal 时间减屎

全球 JS 现状调查民主投票选出的 JS 最大痛点是缺少静态类型，这可以采用 TS 来缓解；而第二大痛点就是 Date 的历史包袱。

date-2nd.png

举个栗子，Date 的月份计算机制比较反直觉：

const month = new Date("2026-03-31");

console.log(month.getMonth());
// 三月返回 2 ？
month.setMonth(month.getMonth() + 1);

const nextMonth = new Date(month);
console.log(nextMonth.getMonth());
// 4...三月 + 1 是 五月？

可以看到，月份计算类似 Array 的索引从 0 开始，且月份加一有时会自动偏移到 下下个月，比如这里三月的下个月是五月。

技术上讲，JS Date 直接移植自 java.utils.Date，由于它存在大量“设计屎山“，Java 在 2010 年代就把它优化掉了。但 JS 为了向后兼容，被 Date 坑了 30 多年。

对此，开发者会采用第三方库来“曲线救国“，但库附带的全球时区数据无法轻易 tree-shaking（树摇优化），会导致项目体积膨胀。

即便如此，库开发也利大于弊，date-fns 等日期库的周下载量过亿，证明了 JS 需要一个更现代化的日期 API。

date-libs.png

为此，moment 库的维护者在 2017 年制定了 Temporal 提案，同年立即进入 Stage1，迄今迭代九年只为“时间减屎“。

今天，Temporal 终于进入 Stage4，将取代 Date 并正式上线，它的月份计算等机制更符合直觉：

const month = Temporal.PlainDate.from("2026-03-31");

console.log(month.month);
// 三月返回数字 3

const nextMonth = month.add({ months: 1 });

console.log(nextMonth.month);
// 三月 + 1 是四月

Temporal 是一个类似 JSON 的 全局命名空间对象，它无法通过 new 来实例化，而是通过几个类提供了 200+ 实用方法。

根据 ECMAScript 官方测试，Temporal 是目前 测试量最大 的模块，也是“后 ES6 时代“以来最大的新功能。

most-test.png

感谢 TC39、库维护者、提案贡献者和彭博社等人，彻底解决了一个 JS 的长期痛点。

🔗 Node 社区爆发“反 AI 运动“

事件导火索是 Node 成员之一“Fastify 之父“联手 AI 提交了一个约 两万行代码 的巨型 PR，引起了热议。

有人认为高品质的 AI 代码要求昂贵硬件和付费服务才能参与，这种“隐形特权“违背了开源精神。

oss-auth.png

另一位谷歌专家指出，AI 编程还存在“理解债务“的隐性成本，这是 AI 生成的海量代码与人能够理解的代码量之间的差距。

举个栗子，如果 AI 采用 Monad（单子） 来做函数式编程，但我不懂什么是“自函子范畴上的幺半群“，那么项目就会不断积累理解债务。

长此以往，AI 编程不利于开源项目的可持续发展。于是，Node 社区联名签署了请愿书，希望在 Node 等 基建项目 中禁用 AI。

node-book.png

“Fastify 之父“强调，人件 + 软件是一种优势，AI 只是将开发瓶颈转移到了 Code Review（代码审核）环节，重点是要明确人也必须对 AI 生成的代码负责。

这让我想起了《人月神话》的比喻，生小孩需要怀胎十月，即使投入十倍人力，也没法把生产周期缩短为一个月。人件的瓶颈始终存在。

最终，Node 背后的 OpenJS 基金会还是允许 AI 贡献源码。好险大部分开发者还算明智，它们原则上允许 AI 辅助编程，但实践中拒绝海量代码的提交。

🔗 Node 研发整数哈希算法

Node 团队为 V8 研发了一种具有最低限度抗 HashDoS（哈希泛洪）能力、且可快速逆向的整数哈希算法。

该算法具有足够的不可预测性，能有效防止盲目攻击者触发严重的性能瓶颈。

同时，运行时持有的密钥可以高效地对其进行逆向操作，从而恢复原始整数值，这对于维护 V8 引擎的性能优化至关重要。

🚦 版本更新

🔗 Astro v6.1

Astro 是 GitHub 第三 SSG（静态站点生成器），它支持在一个框架里编写主流 UI 框架的组件，包括 React / Vue / Svelte 等。

Astro 发布了 v6.1 次版本，比如新增 image.service.config，允许全局设置 png / jpeg 等不同图像编码的默认值，搭配原本每张图片的单独设置一起使用。

🔗 Next v16.2

Next 是 GitHub 第一全栈框架。

Next 发布了 v16.2 次版本，渲染速度飙升，RSC（服务器组件）之前采用 JSON.parse() 方法及其第二个实参 reviver() 回调，底层机制存在性能瓶颈；现在改用一元 JSON.parse() 方法 + 递归遍历提速，这个 JSON 技巧值得借鉴一下。

// 之前：
JSON.parse(text, reviver);

// 现在：
JSON.parse(text);

其次，新增稳定版 Adapters（适配器）API，之前 Cloudflare 联手 AI 将 Next 移植到 Vite，创建了更易于部署到不同平台的 vinext 项目，Adapter API 也是为此而生。

此外，新增 prefetchInlining 配置，去年 Next 爆发致命漏洞，部分用户反馈升级到 Next 16 后，Vercel 托管经费暴涨，但性能不增反减，Next 团队用了大约半年终于上线了实验性 prefetchInlining 配置，fix 了这个隐形的经费性能杀手。

const nextConfig = {
  experimental: {
    prefetchInlining: true,
  },
};

💡 前端信息差

🔗 React 其实没有发明 RSC

React 生态里常常出现一些让人头大的“新概念“，一位 Next 成员解释道，RSC 等概念并非 React 原创。

SSR（服务端渲染）类似于 Express，所以你无法访问到浏览器（客户端）的 window 对象。

RSC 类似于 Pug 模板引擎，所以你无法设置 onClick() 方法。

if name == "Pug"
  button(class="btn") Hello Pug
else
  button(class="btn") My name is #{name}

Hydration 类似于 jQuery，所以你使用 jQuery 也可能遭遇水合错误。

从概念上讲，这些新概念只是新瓶装旧酒，把旧概念在 React 生态里重新发明了一遍，关键在于透过现象看本质。

🔗 light-dark() 或将支持图像

CSS light-dark() 函数常用于深浅主题，但目前它只适用颜色切换。

有时我们还想根据深浅主题，自动应用对应风格的 Logo 或背景图片等，这需要借助下列代码：

:root {
  --bg-image: url(light-pattern.png);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-image: url(dark-pattern.png);
  }
}

.element {
  background-image: var(--bg-image);
}

这种方案的问题在于图片的设置分散，不利于代码维护，而且只支持全局的 prefers-color-scheme。

现在，light-dark() 函数有新进展，或将支持图片切换亮暗模式：

.element {
  color-scheme: dark;
  background-image: light-dark(url(light-pattern.png), url(dark-pattern.png));
}

这种方案可以在统一位置设置图片，而且支持局部的 color-scheme。

🛠️ 工具推荐

最后分享一个关于 JS Date 的问答网站：🔗 JS Date WTF。

date-wtf.gif

这个网站里大约有 30 道选择题，你可以自己动手刷刷看，学习一下 Date 的各种怪癖或极端情况，网站会根据你的回答进一步解释。

相信大家搞懂了 Date 的设计屎山之后，对比学习 JS 新出的 Temporal API 时，一定会事半功倍。

🙏 特别鸣谢

以上就是本期《Web 周刊》的全部内容了，希望对你有所帮助。

👍 感谢大家按赞跟转发分享本文，你的手动支持是我持续更新的最大动力。

😘 已经关注我的粉丝们，我们下期再见啦，掰掰~~

cat-thank.gif

avatar
文章
阅读
粉丝