2023 年不可错过的 10 大 JavaScript 更新

ECMAScript 新特性

每年,都会有很多新的语言特性在 ECMAScript 中得到标准化,然后在浏览器中实现。今年我最喜欢的新特性之一是对象的 groupBy

试想一下,你有一个来自数据库的对象数组,每个对象都有一个 age 字段。你可以利用 groupBy 函数将年龄在 21 岁以下的人划归为儿童,年龄在 21 岁以上的人划归为成人,最终结果是一个按年龄分组的对象。

图片

但是,我发现自己更常用的是数组的 toSorted 函数,与此同时还有 toSplice 和 toReversed

图片

JavaScript 已经有了 sort 和 reverse 方法,但问题是它们会直接修改原数组。有的时候可能挺疑惑的,因为像 map 和 filter 等其他方法并不会直接修改原数组,而是复制数组并返回一个新的数组。通过这些新的方法,你现在可以将原数组视为不可变值来排序、反转和切割数组,这种方式写代码更为理智。

新的 HTML 元素

图片

Web 开发者也从新的 HTML 元素方面获得了新的更新。例如,Search 标签提供了一种更具语义化的定义网站搜索框的方式,取而代之的是更为泛化的 Form 标签。

图片

更强大的 Dialog 元素可以让我们创建一个实际的模态对话框,并通过内置方法如 showModal 和 close 来使用 JavaScript 进行控制。

iOS Web Push

图片

经过多年广大开发者的苦苦哀求 ,iOS 终于支持从 Web APP 接收推送通知。

图片

这对于那些实际上允许网站向他们发送推送通知的 0.00001% 的网站用户来说,无疑是一项重大的胜利。

Next.js 更新

图片

接下来我们再来谈谈框架的变动,作为世界上最受欢迎的 JavaScript 框架之一,Next.js 在过去的一年里发生了翻天覆地的变化,这要归功于在 5 月发布的 13.4  稳定版本中引入了的 App Dir

图片

其中最引人注目的就是现在可以直接在 React 组件中获取数据,这要归功于 Server Component,它们是可以在服务器上运行的 React 组件。

对于这些更新开发者们众说纷纭。一方面,这确实带来了很多出色的新特性,极大地简化了代码;但另一方面,许多人也在抱怨这很像半成品,感觉就像现在游戏公司发布新游戏时的心态,先推出产品,然后在接下来的几年里逐步完成和完善。

图片

人们抱怨必须在各处使用 "user client" 指令,因为它会导致现存的 React 库出现各种各样的问题。

图片

人们也抱怨 Server Component 的运行速度非常慢,这是基于 rust 实现的,这很奇怪,因为大家往往会认为任何基于 rust 实现的东西都应该很快。

图片

人们将新的 React 在 Server 上的特性嘲笑为 PHP,这是对 JavaScript 框架的一种最具侮辱性的侮辱。

图片

然而,最大的问题却是在 Verell 之外,很难正常运行 Next.js

图片

所以现在又开始产生了一些新的项目,比如 open next,它们致力于将 Next.js 运行在任何地方。

Vue.js 更新

图片

Nuxt.js 和 Vue.js 生态系统也在 2023 年有了很多酷炫的更新,比如它的 Devtoos

图片

这些工具可以直接在浏览器中运行,让你更容易理解复杂应用的结构。

图片

但你可能不知道的是,很多组件都是通过统一的 JavaScript 工具生态系统来提供的,比如,如果你不在乎 Vue.js,只想要一个 Web 服务器,你可以使用 Nitro 来用纯 JavaScript 构建一个快速的服务器。

图片

有趣的是,我觉得 Vue.js 生态系统在 2023 年变化最小,它给我的感觉像是最稳定和可预测的生态系统。

Svelte 更新

图片

对比之下, Svelte 就在 2023年好像遭到了重创。Svelte 宣布了一项新特性 "runes",这个特性将在版本5中大幅改变开发者的体验。

图片

有些用户感觉这个变化使 Svelte 看起来更像 React,但是这正是他们试图摆脱的开发者体验。但另一方面,很多人也对这项更新表示支持,将它们视为框架在正确方向上发展的必要步骤。作为一名 Svelte 的忠实用户,我决定等待版本5的最终发布后再下定论。

Angular 更新

图片

2023 年变化最大的框架奖颁给 Angular,新增了很多特性。

图片

最值得注意的是全新的模板语法,提供了更简洁的方式处理条件与循环,取代之前的 ngfor 之类的写法。

图片

同时,Angular还有了一个全新的 Logo,这无疑打破了它成为世界上最流行框架的最后一道阻碍。

Node.js

图片

前端有着大起大落,后端则沉稳稳健地在不断提升。Node.js 的 20 版本中引入了一种新的权限模型。

图片

通过控制脚本访问某项特性来提高安全性,类似之前 Deno 提出的概念。

图片

在 Node 21 的发布中,引入了它自己的 Websocket 客户端,基于浏览器的 Websocket API 实现。

Bun

图片

然而,2023 年后端 JavaScript 的最大颠覆者毫无疑问是 Bun,这是一款用 Zig 编写的新 JavaScript 运行时。

图片

虽然在发布初期发现了许多 Bug,但它凭借卓越的开发体验和对性能的激进声明,依然被人们看作是 JavaScript 在未来进行后端开发的一种有潜力的新方式。

HTMX 的出现

图片

HTMX 可以直接让我们在无需编写任何 JavaScript 代码的情况下使用 AJAX、SSE 和 WebSockets 的力量进行动态更新页面。

这是一个为整个 JavaScript 生态系统带来更多想象力的框架,它实际上可以消除一个项目里的大量 JavaScript,比起所有主要框架采取的常规方法,它是 JavaScript 仇恨者最理想的 JavaScript 框架。

最后

大家有什么看法,欢迎来评论区留言。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值