读2020年Javascript趋势报告展望ES2020

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2020年是一个不平凡的一年，但已经过去了，总结过去，展望未来！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Javascript 在过去一年里整体上在设法向前发展。得益于像可选链（Optional Chaining）和空值合并运算符（Nullish Coalescing）这样的新特性，语言本身在不断改进，而 TypeScript 的广泛使用将静态类型化普及到了一个新的高度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2021年1月14日，","attrs":{}},{"type":"link","attrs":{"href":"https://2020.stateofjs.com/zh-Hans/conclusion/","title":""},"content":[{"type":"text","text":"Javascript 2020趋势调查报告发布","attrs":{}}]},{"type":"text","text":"了。调查结果来自","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"137","attrs":{}},{"type":"text","text":"个国家的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"23,765","attrs":{}},{"type":"text","text":"名开发者，涵盖了开发者对Javascript特性、技术、工具等的使用和想法。下面来一起看看这份报告，并加深对Javascript的认识，在新的一年里提升一个档次。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2021年Javascript工具","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"去年，最常用的技术没有发生太大的变化。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"TypeScript","attrs":{}}],"attrs":{}},{"type":"text","text":"仍然是最常用的Javascript风格，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"React","attrs":{}}],"attrs":{}},{"type":"text","text":"仍然是最常用的前端库，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Express","attrs":{}}],"attrs":{}},{"type":"text","text":"仍然是最常用的后端库。如果你想成为一名Web工程师，那么这些绝对是应该首先学习的技术。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，谈到开发人员在2020年最喜欢的技术时，看到了许多新的竞选者，可能也代表着一种未来趋势。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"前端框架：Svelte","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/99/99b7d37718ee31d9d9e8f6c47ea5f1fd.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://svelte.dev/","title":""},"content":[{"type":"text","text":"Svelte","attrs":{}}]},{"type":"text","text":"取代了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"React","attrs":{}}],"attrs":{}},{"type":"text","text":"，成为最受欢迎的前端库。与React必须在最终应用程序中的用户代码之上发布React库代码不同，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Svelte","attrs":{}}],"attrs":{}},{"type":"text","text":"是一个编译器，可将用户代码编译为优化的原生Javascript。结果是包的大小更小，性能更快。随着Sapper（Svelte's Next.js）和Svelte Native（Svelte's React Native）的引入，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Svelte","attrs":{}}],"attrs":{}},{"type":"text","text":"的生态系统正在迅速成熟，使其成为React-Vue-Angular主导地位的有力竞争者。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"后端框架：Next.js","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1d604ed04167136eb2a7bcaf207612e7.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://nextjs.org/","title":""},"content":[{"type":"text","text":"Next.js","attrs":{}}]},{"type":"text","text":"取代","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Express","attrs":{}}],"attrs":{}},{"type":"text","text":"成为最受欢迎的后端框架。 可能有人认为它们不属于同一类别，因为它们处理不同的实例，但对于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Next.js","attrs":{}}],"attrs":{}},{"type":"text","text":"在报告中居首位没什么意外。它是一个优秀的服务器端呈现框架和静态站点生成器。此外，为Next.js量身定制的部署平台","attrs":{}},{"type":"link","attrs":{"href":"https://vercel.com/","title":""},"content":[{"type":"text","text":"Vercel","attrs":{}}]},{"type":"text","text":"也对Next.js进行了补充，允许非常容易地交付代码。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"构建工具：esbuild和Snowpack","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0d/0d7c28067d30f4947ff2a818a65e6518.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://esbuild.github.io/","title":""},"content":[{"type":"text","text":"esbuild","attrs":{}}]},{"type":"text","text":"和","attrs":{}},{"type":"link","attrs":{"href":"https://www.snowpack.dev/","title":""},"content":[{"type":"text","text":"Snowpack","attrs":{}}]},{"type":"text","text":"取代了webpack，成为最受欢迎的构建工具。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"esbuild","attrs":{}}],"attrs":{}},{"type":"text","text":"是用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Golang","attrs":{}}],"attrs":{}},{"type":"text","text":"编写的构建工具，因此其性能比","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"webpack","attrs":{}}],"attrs":{}},{"type":"text","text":"快几个数量级。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另一方面，Snowpack引入了一种只构建每个ES模块一次的新方法。在那之后，Snowpack只构建已经改变的ES模块。相比之下，像webpack这样的传统构建工具在每次进行更改时都会构建整个项目。esbuild和Snowpack尽管使用的方法不同，但都极大地减少了开发和部署时间。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"跨平台框架：Electron和Capacitor","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ef/ef742525976595b324fd43d92f7ec9f4.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.electronjs.org/","title":""},"content":[{"type":"text","text":"Electron","attrs":{}}]},{"type":"text","text":" 和 ","attrs":{}},{"type":"link","attrs":{"href":"https://reactnative.dev/","title":""},"content":[{"type":"text","text":"React Native","attrs":{}}]},{"type":"text","text":"是跨终端跨平台应用框架，在2020年，新的解决方案 ","attrs":{}},{"type":"link","attrs":{"href":"https://capacitorjs.com/","title":""},"content":[{"type":"text","text":"Capacitor","attrs":{}}]},{"type":"text","text":" 也开始掀起波澜。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Javascript新特征","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"调查还显示，新的Javascript功能的使用率较低，例如","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullishcoalescingoperator","title":""},"content":[{"type":"text","text":"空值合并运算符","attrs":{}}]},{"type":"text","text":"（45.3％），","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE","title":""},"content":[{"type":"text","text":"可选链操作符","attrs":{}}]},{"type":"text","text":"（66.7％）和","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled","title":""},"content":[{"type":"text","text":"Promise.allSettled()","attrs":{}}]},{"type":"text","text":"（14.7％）。由于所有主流浏览器和Node.js 14+都支持它们，现在可能是将它们合并到代码中的好时机。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"空值合并运算符","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"空值合并操作符（","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"??","attrs":{}}],"attrs":{}},{"type":"text","text":"）是一个逻辑操作符，当左侧的操作数为 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"null","attrs":{}}],"attrs":{}},{"type":"text","text":" 或者 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}},{"type":"text","text":" 时，返回其右侧操作数，否则返回左侧操作数。对于现有的Javascript来说是个不错的补充，优化并统一了对","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"null","attrs":{}}],"attrs":{}},{"type":"text","text":" 或者 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}},{"type":"text","text":"的判断标准。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const foo = null ?? \"default string\";\nconsole.log(foo);\nconst baz = 0 ?? 42;\nconsole.log(baz);","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"输出结果：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":"\"default string\"\n0","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"可选链操作符","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可选链操作符 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"?.","attrs":{}}],"attrs":{}},{"type":"text","text":"允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"?.","attrs":{}}],"attrs":{}},{"type":"text","text":" 操作符的功能类似于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":" .","attrs":{}}],"attrs":{}},{"type":"text","text":" 链式操作符，不同之处在于，在引用为空(nullish ) (","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"null","attrs":{}}],"attrs":{}},{"type":"text","text":" 或者 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}},{"type":"text","text":") 的情况下不会引起错误，该表达式短路返回值是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}},{"type":"text","text":"。与函数调用一起使用时，如果给定的函数不存在，则返回 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"undefined","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":"const myinfo = {\n account: {\n name: \"DevPoint\",\n \taddress:{\n city:{\n code:1101,\n name:\"Shenzhen\"\n }\n }\n },\n};\nconsole.log(myinfo?.account?.name); // print \"DevPoint\"\nconsole.log(myinfo?.account?.address?.province?.code); // print undefined\nconsole.log(myinfo.account.address.province.code); // error","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Promise.allSettled()","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Promise.allSettled()","attrs":{}}],"attrs":{}},{"type":"text","text":"方法返回一个在所有给定的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"promise","attrs":{}}],"attrs":{}},{"type":"text","text":"都已经","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"fulfilled","attrs":{}}],"attrs":{}},{"type":"text","text":"或","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"rejected","attrs":{}}],"attrs":{}},{"type":"text","text":"后的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"promise","attrs":{}}],"attrs":{}},{"type":"text","text":"，并带有一个对象数组，每个对象表示对应的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"promise","attrs":{}}],"attrs":{}},{"type":"text","text":"结果。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const promise1 = Promise.resolve(3);\nconst promise2 = new Promise((resolve, reject) =>\n setTimeout(reject, 100, \"foo\")\n);\nconst promises = [promise1, promise2];\n\nPromise.allSettled(promises).then((results) =>\n results.forEach((result) => console.log(result.status))\n);\n\n// expected output:\n// \"fulfilled\"\n// \"rejected\"","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"尽管上述新的特征可以快速添加到代码中，但其他ES2020新功能也同样给到惊喜，例如","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt","title":""},"content":[{"type":"text","text":"BigInt","attrs":{}}]},{"type":"text","text":"和","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import#%E5%8A%A8%E6%80%81import","title":""},"content":[{"type":"text","text":"动态导入","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"BigInt","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"BigInt","attrs":{}}],"attrs":{}},{"type":"text","text":" 是一种内置对象，它提供了一种方法来表示大于以下的整数","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"math"},"content":[{"type":"text","text":"2^{53} - 1","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这原本是 Javascript中可以用 Number 表示的最大数字。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"BigInt","attrs":{}}],"attrs":{}},{"type":"text","text":" 可以表示任意大的整数。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"动态import","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"标准用法的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"import","attrs":{}}],"attrs":{}},{"type":"text","text":"导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，可能希望根据条件导入模块或者按需导入模块，这时可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"动态import","attrs":{}}],"attrs":{}},{"type":"text","text":"代替静态导入。下面的是需要使用动态导入的场景：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它。","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当被导入的模块，在加载时并不存在，需要异步获取","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当导入模块的说明符，需要动态构建。（静态导入只能使用静态说明符）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当被导入的模块有副作用（这里说的副作用，可以理解为模块中会直接运行的代码），这些副作用只有在触发了某些条件才被需要时。（原则上来说，模块不能有副作用，但是很多时候，无法控制你所依赖的模块的内容）","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"请不要滥用动态导入（只有在必要情况下采用）。静态框架能更好的初始化依赖，而且更有利于静态分析工具发挥作用","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"结论","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2020年，Javascript库领域发生了巨大变化。诸如","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"esbuild","attrs":{}}],"attrs":{}},{"type":"text","text":"之类的新手很快占据了主导地位。也看到像","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Svelte","attrs":{}}],"attrs":{}},{"type":"text","text":"这样冷落了一段时间的项目最终获得了关注。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ES2020还引入了一些期待已久的Javascript新特征，解决了Javascript开发人员的许多难题，同样提高了代码的可读性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于Javascript开发人员而言，2020年虽不平凡，但在很多新的领域是多么激动人心的一年！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}