前端週刊第十五期

夕陽白雪發表於2022-04-17
前端

前端週刊發表每週前端技術相關的大事件、文章教程、一些框架的版本更新、以及程式碼和工具。每週定期發表，歡迎大家關注、轉載。
如果外鏈不能訪問，關注公眾號「前端每週看」，裡面有解決辦法

大事件

  • 2021 年前端效能清單（PDF、Apple Pages、MS Word）——Web 效能是一個棘手的問題，不是嗎？我們如何真正知道我們在效能方面的立場，以及我們的效能瓶頸到底是什麼？是昂貴的 JavaScript、緩慢的網路字型交付、沉重的影像還是緩慢的渲染？我們是否對 tree-shaking、範圍提升、程式碼分割以及所有帶有交叉點觀察器、漸進式水化、客戶端提示、HTTP/3、服務工作者和 - 哦我的 - 邊緣工作者的花哨的載入模式進行了足夠的優化？而且，最重要的是，我們甚至從哪裡開始提高績效，我們如何建立長期的績效文化？

  • JavaScript 運算子的“搜尋引擎” ——快速：儘可能多地命名運算子！大概十點左右吧？該站點涵蓋了大約50個內容，並對每個內容進行了快速解釋。

  • TypeScript 4.7 Beta 釋出——Node.js 的 ES 模組支援現在是一項官方功能，您可以指定package.jsonJS 檔案是解釋為 ES 模組還是 CommonJS 模組。如果您願意，也支援擴充套件.mjs。.cjs還有改進的函式推理、例項化表示式，您可以typeof在私有欄位上使用。最終的 TS 版本往往會從 beta 版開始快速釋出，因此預計很快會發布 4.7 最終版。

  • “通過複製更改陣列”：四種新的非破壞性陣列方法——Axel介紹了另一個正在進行的 ECMAScript 提案（該提案處於第 3 階段），該提案將介紹一些非破壞性方法來反轉、排序、拼接, 並設定（某種）陣列元素。

文章

  1. Vue3全域性Api支援tree-shaking後的一些變更 — 在 Vue 3 中，全域性和內部 API 都經過了重構，並考慮到了 tree-shaking 的支援。因此，全域性 API 現在只能作為 ES 模組構建的命名匯出進行訪問。

  2. React18正式版原始碼級剖析 — React18正式版終於來了，哪個是你期待的，Concurrent、Suspense、transitions還是新的Hooks API？

  3. chrome外掛最新版本開發指南來了 - 網上關於chrome外掛開發的教程有不少，可惜都是基於第二版本(manifest V2)，chrome官方在2020年11月就推出第三版(manifest V3)的開發規範了，但是感覺國內很少有外掛基

  4. Fetch 與 Axios：獲取 HTTP 資源的比較 - 對長期存在但邊緣的舊Axios客戶端與使用 Fetch API的初學者級比較。

  5. 使用 D3 構建互動式迷你圖 - 能夠構建資料視覺化對任何人來說都是一項得心應手的技能——這是一項簡單而優雅的技能。

  6. 如何使用 Nuxt 構建由 CMS 提供支援的部落格 - 使用無頭 CMS（在本例中為 ButterCMS）和Nuxt Vue.js 框架建立一個沒有伺服器的部落格。

  7. A Guide to Optimizing JavaScript for Quick Page Loads - 涉及一些現代方法，包括 Astro、Qwik 和 Partytown。

  8. 如何檢測 React 應用程式中的“長按”手勢 - 如何檢測 React 應用程式中的“長按”手勢

框架釋出

  1. Shepherd 9.1 – 為您的應用建立導覽。
  2. Jasmine 4.1 – JS 測試框架。
  3. PouchDB 7.3 – 受 CouchDB 啟發的同步資料庫。
  4. Oclif 3.0 – Node.js CLI 應用程式框架。
  5. Opal 1.5 – Ruby 到 JavaScript 轉譯器。
  6. react-hooks-testing-library 8.0
  7. 建立 React App 5.0.1 - 提高了 React 18 的相容性。

程式碼和工具

  1. Wild Wild Path: Object Property Paths with Wildcards and Regexps：一種通過支援萬用字元和正規表示式的基於字串的查詢來訪問物件（可以深度巢狀）中屬性的狂野方式。你需要看一些例子才能真正理解這個想法。

  2. YouTube.js 1.4：圍繞 YouTube 的私有 API 的包裝器： 描述的方式，我懷疑你的里程可能會有所不同.. 但這是一個有趣的想法，並且使用與 YouTube 客戶端相同的 API。

  3. jc：將流行 CLI 工具的輸出轉換為 JSON 的 CLI 工具：這是用Python編寫的，但可能對 JavaScript 開發人員有用，因為它可以轉換檔案或 50 多種其他工具（包括dig、du、iostat和lsof）成易於處理的 JSON。

  4. React Admin 4.0：B2B 應用程式的管理皮膚：一個框架，用於在您選擇的後端（REST、GraphQL 等，或者您可以編寫自己的介面卡）上構建基於瀏覽器的“管理”應用程式。如果您想現場觀看，這裡有一個演示。MIT 許可，但如果需要支援，也有專業版本。GitHub 儲存庫。

  5. nextjs-blog-theme：使用 Next.js 和 Tailwind 構建的可自定義部落格啟動器：包括深色和淺色主題以及對 MDX 的支援。在此處嘗試現場演示（頁面底部的深色模式開關）。

  6. scroll-snap：一個可定製的“Scroll Snap”實現：一個仍在維護的舊專案。用於requestAnimationFrame()60fps 滾動效能並且沒有任何依賴關係。在這裡試試。

  7. Gladys Assistant：隱私優先的開源家庭助手：它可以在任何 Linux 機器（包括 Raspberry Pi）上執行，並在後臺使用 Node。

相關文章