2020 年是一个不平庸的一年,但曾经过来了,总结过来,展望未来!
Javascript 在过来一年里整体上在设法向前倒退。得益于像可选链(Optional Chaining)和空值合并运算符(Nullish Coalescing)这样的新个性,语言自身在不断改进,而 TypeScript 的宽泛应用将动态类型化遍及到了一个新的高度。
2021 年 1 月 14 日,Javascript 2020 趋势调查报告公布了。调查结果来自 137 个国家的 23,765 名开发者,涵盖了开发者对 Javascript 个性、技术、工具等的应用和想法。上面来一起看看这份报告,并加深对 Javascript 的意识,在新的一年里晋升一个品位。
2021 年 Javascript 工具
去年,最罕用的技术没有产生太大的变动。TypeScript
依然是最罕用的 Javascript 格调,React
依然是最罕用的前端库,Express
依然是最罕用的后端库。如果你想成为一名 Web 工程师,那么这些相对是应该首先学习的技术。
然而,谈到开发人员在 2020 年最喜爱的技术时,看到了许多新的竞选者,可能也代表着一种将来趋势。
前端框架:Svelte
Svelte 取代了 React
,成为最受欢迎的前端库。与 React 必须在最终应用程序中的用户代码之上公布 React 库代码不同,Svelte
是一个编译器,可将用户代码编译为优化的原生 Javascript。后果是包的大小更小,性能更快。随着 Sapper(Svelte’s Next.js)和 Svelte Native(Svelte’s React Native)的引入,Svelte
的生态系统正在迅速成熟,使其成为 React-Vue-Angular 主导地位的无力竞争者。
后端框架:Next.js
Next.js 取代 Express
成为最受欢迎的后端框架。可能有人认为它们不属于同一类别,因为它们解决不同的实例,但对于 Next.js
在报告中居首位没什么意外。它是一个优良的服务器端出现框架和动态站点生成器。此外,为 Next.js 量身定制的部署平台 Vercel 也对 Next.js 进行了补充,容许非常容易地交付代码。
构建工具:esbuild 和 Snowpack
esbuild 和 Snowpack 取代了 webpack,成为最受欢迎的构建工具。esbuild
是用 Golang
编写的构建工具,因而其性能比 webpack
快几个数量级。
另一方面,Snowpack 引入了一种只构建每个 ES 模块一次的新办法。在那之后,Snowpack 只构建曾经扭转的 ES 模块。相比之下,像 webpack 这样的传统构建工具在每次进行更改时都会构建整个我的项目。esbuild 和 Snowpack 只管应用的办法不同,但都极大地缩小了开发和部署工夫。
跨平台框架:Electron 和 Capacitor
Electron 和 React Native 是跨终端跨平台利用框架,在 2020 年,新的解决方案 Capacitor 也开始掀起波澜。
Javascript 新特色
考察还显示,新的 Javascript 性能的使用率较低,例如空值合并运算符(45.3%),可选链操作符(66.7%)和 Promise.allSettled()(14.7%)。因为所有支流浏览器和 Node.js 14+ 都反对它们,当初可能是将它们合并到代码中的好时机。
空值合并运算符
空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null
或者 undefined
时,返回其右侧操作数,否则返回左侧操作数。对于现有的 Javascript 来说是个不错的补充,优化并对立了对 null
或者 undefined
的判断规范。
const foo = null ?? "default string";
console.log(foo);
const baz = 0 ?? 42;
console.log(baz);
输入后果:
"default string"
0
可选链操作符
可选链操作符 ?.
容许读取位于连贯对象链深处的属性的值,而不用明确验证链中的每个援用是否无效。?.
操作符的性能相似于 .
链式操作符,不同之处在于,在援用为空(nullish) (null
或者 undefined
) 的状况下不会引起谬误,该表达式短路返回值是 undefined
。与函数调用一起应用时,如果给定的函数不存在,则返回 undefined
。
const myinfo = {
account: {
name: "DevPoint",
address:{
city:{
code:1101,
name:"Shenzhen"
}
}
},
};
console.log(myinfo?.account?.name); // print "DevPoint"
console.log(myinfo?.account?.address?.province?.code); // print undefined
console.log(myinfo.account.address.province.code); // error
Promise.allSettled()
该 Promise.allSettled()
办法返回一个在所有给定的 promise
都曾经 fulfilled
或rejected
后的 promise
,并带有一个对象数组,每个对象示意对应的promise
后果。
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
setTimeout(reject, 100, "foo")
);
const promises = [promise1, promise2];
Promise.allSettled(promises).then((results) =>
results.forEach((result) => console.log(result.status))
);
// expected output:
// "fulfilled"
// "rejected"
只管上述新的特色能够疾速增加到代码中,但其余 ES2020 新性能也同样给到惊喜,例如 BigInt 和动静导入。
BigInt
BigInt
是一种内置对象,它提供了一种办法来示意大于以下的整数
2^{53} - 1
这本来是 Javascript 中能够用 Number 示意的最大数字。BigInt
能够示意任意大的整数。
动静 import
规范用法的 import
导入的模块是动态的,会使所有被导入的模块,在加载时就被编译(无奈做到按需编译,升高首页加载速度)。有些场景中,可能心愿依据条件导入模块或者按需导入模块,这时能够应用 动静 import
代替动态导入。上面的是须要应用动静导入的场景:
- 当动态导入的模块很显著的升高了代码的加载速度且被应用的可能性很低,或者并不需要马上应用它。
- 当动态导入的模块很显著的占用了大量零碎内存且被应用的可能性很低。
- 当被导入的模块,在加载时并不存在,须要异步获取
- 当导入模块的说明符,须要动静构建。(动态导入只能应用动态说明符)
- 当被导入的模块有副作用(这里说的副作用,能够了解为模块中会间接运行的代码),这些副作用只有在触发了某些条件才被须要时。(原则上来说,模块不能有副作用,然而很多时候,无法控制你所依赖的模块的内容)
请不要滥用动静导入(只有在必要状况下采纳)。动态框架能更好的初始化依赖,而且更有利于动态剖析工具发挥作用
论断
2020 年,Javascript 库畛域产生了巨大变化。诸如 esbuild
之类的老手很快占据了主导地位。也看到像 Svelte
这样冷清了一段时间的我的项目最终取得了关注。
ES2020 还引入了一些期待已久的 Javascript 新特色,解决了 Javascript 开发人员的许多难题,同样进步了代码的可读性。
对于 Javascript 开发人员而言,2020 年虽不平庸,但在很多新的畛域是如许激动人心的一年!