讀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}}]}