前端週刊第三十六期

2022-09-19 06:05:50

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

大事件

  • MemLab:用於查詢 JavaScript 記憶體漏失的框架—— Facebook(抱歉, Meta)一直在使用 MemLab 對其主要 SPA 的記憶體使用進行重大改進。現在他們已經開源了這個工具(它本身是用 TypeScript 編寫的),希望其他人也能實現類似的改進。

  • 你不知道的 JavaScript API——這是一個大膽的標題,因為你們中的很多人至少都聽說過這些 API,但它仍然是一個很好的總結,可以讓你瞭解 Web 平臺提供的內容。涵蓋的 API 包括頁面可見性、Web 共用和廣播頻道 API。

  • 建立現代 npm 包的最佳實踐——使用當前最佳實踐建立自己的 npm 包的「截至 2022 年」的分步演練。它非常徹底,當然值得重新審視,即使您已經構建了一個包。不過,與往常一樣,有不止一種方法可以做到這一點,並且可以根據需要將其他工具(如np )加入其中。

文章

  1. 呼叫不帶括號的函數的第七種方法 — 如果你對竟然有六種方法感到驚訝,那麼這是給你的。這些幾乎完全是「技巧」,但在安全性或清理使用者提供的程式碼方面可能很重要。

  2. 2022 年 HTML 表單有什麼新變化? — 使用您可能錯過的表單的一些有用的補充……

  3. 成功使用多視窗 WebGL 畫布的祕訣 — 這是技術性的,我們大多數人不需要深入挖掘,但它是對使用螢幕外畫布使用單獨的工作上下文進行渲染的巧妙探索——然後這些可以用於其他索引標籤或瀏覽器視窗。

  4. 為什麼type="number"輸入是最差的輸入 — 認為網路表單有你的號碼?如果您使用過input type=」number」,您可能會驚訝地發現它沒有。

  5. useSyncExternalStore:被低估的 React Hook? — 訂閱外部資料來源的掛鉤。但是你知道它也可以用來阻止過度返回React 勾點觸發不必要的重新渲染嗎?

框架釋出

  1. Spacetime 7.2 – 輕量級時區庫。

  2. React Router 6.4
    ↳ 現在具有向後移植的 Remix 功能。

  3. Fastify 4.6
    ↳ 快速、低開銷的 Node 網路框架。

  4. Preact 10.11
    ↳ 3KB 使用相同 API 的 React 替代方案。

  5. Cypress 10.8
    ↳ 輕鬆測試瀏覽器中的任何內容。

  6. React Grid Gallery 1.0
    ↳ 對齊的圖片庫元件。

  7. sablejs 1.1
    ↳ ES5.1 用純 JS 編寫的直譯器。

  8. Crunker 2.0
    ↳ 使用 Web Audio API 連線音訊檔。

  9. ka-table 7.6
    ↳ 使用排序、過濾等對錶格元件進行反應。

  10. d3-graphviz 4.4
    ↳ Graphviz DOT 渲染和動畫過渡。

程式碼和工具

  1. npm-check-updates:package.json將依賴項更新到最新版本:也就是說,與指定版本相反。一個特別簡潔的功能是-i互動模式,因此您可以檢視潛在的升級,然後逐一進行操作。

  2. SafeQL:用於 SQL 查詢的 ESLint 外掛:聰明的想法。它與您的資料庫掛鉤,然後指導您在 JavaScript 程式碼中編寫 SQL 查詢時可能犯的錯誤。Postgres 只是現在,但支援任何使用者端.. 無論是 Prisma、pg、Sequelize 還是其他。

  3. Theatre.js 0.5:用於 Web 的 Hackable Motion Design:可用於以程式設計方式和視覺化方式為使用 Three.js、React Three Fiber、HTML/SVG 等建立的 3D 物件設定動畫,甚至「動畫」變數值。v0.5 引入了 3D 場景編輯和複雜的關鍵幀。