視野修煉-技術週刊第87期 | Nodejs 15 週年

粥里有勺糖發表於2024-06-09
NodeJS

歡迎來到第 87 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介

🔥強烈推薦

  1. js 中的經典八股
  2. merge-anything - 深度合併物件的庫
  3. DOM 樹深度對渲染效能的影響

🔧開源工具&技術資訊

  1. Node.js 15週年
  2. 頁面元素測量工具
  3. Best Cookier - cookie管理外掛
  4. ShotEasy - 線上的圖片壓縮

📚 教程&文章

  1. 2024 應該瞭解的 Node.js 特性
  2. CSS 長度單位介紹 - 非常全面的指南
  3. 僅使用CSS實現計時器

​也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）

下面開始本期內容的介紹，預計閱讀時間 8 分鐘。

🔥強烈推薦

1. js 中的經典八股

Number.parseInt(0.0000005) === 5 // true
Number.NaN === Number.NaN // false

(() => {
  try {
    return 1
  }
  finally {
    return 2
  }
})() === 2 // true

Math.max() < Math.min() // true

好奇結果為什麼會是這樣？可以看看這篇文章，很多經典的問題 👍🏻。

2. merge-anything - 深度合併物件的庫

使用示例

import { merge } from 'merge-anything'

const starter = { name: 'Squirtle', types: { water: true } }
const newValues = { name: 'Wartortle', types: { fighting: true }, level: 16 }

const evolution = merge(starter, newValues, { is: 'cool' })
// returns {
//   name: 'Wartortle',
//   types: { water: true, fighting: true },
//   level: 16,
//   is: 'cool'
// }

完整的 TS 型別支援。

import type { Merge } from 'merge-anything'

interface A1 { name: string }
interface A2 { types: { water: boolean } }
interface A3 { types: { fighting: boolean } }

type Result = Merge<A1, [A2, A3]>

作者還有很多其它好用的小工具專案。

收藏起來，一定有機會用得上這個。

3. DOM 樹深度對渲染效能的影響

作者在使用 lighthouse 分析網頁效能時發現了這個警告。

然後開始了影響的探究，下面是它的測試結論，GitHub: 測試程式碼。

作者的測試機器 Mac M1，CPU速度降低4倍。

下面時設定 CPU 降速的位置。

有額外的樣式場景下，DOM重新計算耗時有明顯的頁面卡頓。

最後作者的大概的結論是：避免有附加樣式且過深的巢狀。

🔧開源工具&技術資訊

4. Node.js 15週年

時間過得真快，印象中 14 週年才過沒多久。

5. 頁面元素測量工具

一個 chrome 外掛，可以測量 WEB 頁面元素的尺寸資訊。

部分大公司是會有專門的UI走查工具給設計同學驗收頁面使用。

筆者很久之前也做過類似的工具，效果差不多。

6. Best Cookier - cookie管理外掛

可以便捷的增、刪、改、查，非 http-only 的 cookie，支援便捷的匯入匯出，變化監聽。

7. ShotEasy - 線上的圖片壓縮

沒有細看效果，可以先收藏，有需要的時候拿出來用用。

📚 教程&文章

8. 2024 應該瞭解的 Node.js 特性

文章展示了 Node.js v21 已經開箱即用的一些新特性。

① 測試相關：內建 assert, test, mock 模組搭配使用，內建測試覆蓋率。

import assert from 'node:assert'
import fs from 'node:fs/promises'
import { describe, mock, test } from 'node:test'
import { loadEnv } from '../src/dotenv.js'

describe('dotenv test suite', () => {
  test('should load env file', async () => {
    const mockImplementation = async (path) => {
      return 'PORT=3000\n'
    }
    const mockedReadFile = mock.method(fs, 'readFile', mockImplementation)
    const env = await loadEnv('.env')
    assert.strictEqual(env.PORT, '3000')
  })
})

{
  "scripts": {
    "test": "node --test ./tests",
    "test:coverage": "node --experimental-coverage --test ./tests"
  }
}

② node watch

node --watch app.js

可以平替 nodemon

③ 讀取 .env 檔案中的環境變數

node --env-file=./.env.default --env-file=./.env.development index.js

④ 定時器 Promise

const {
  setTimeout,
} = require('node:timers/promises')

setTimeout(2000, 'Two seconds later...').then((res) => {
  console.log(res)
})

console.log('Taking a break...')

9. CSS 長度單位介紹 - 非常全面的指南

10. 僅使用CSS實現計時器

😛趣圖

篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步部落格

⭐️強力推薦關注

  • 阮一峰: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五釋出
  • 雲謙：MDH 前端週刊 - 前端資訊和分享
    s* 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
  • 值得一讀技術部落格 - 每天進步一點點，每天分享有料的技術文章！
  • FRE123 技術週刊精選 - 前後端技術週刊精選推薦資訊流

相關文章