本文我們分析Tailwind CSS原始碼中的DefaultMap類別。這是一個可以為不存在的鍵產生預設值的映射。產生的預設值被加到映射中以避免重新計算。

/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap extends Map {
  constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}

在 JavaScript 中，我們有 Map API，但沒有 DefaultMap。這個 DefaultMap 是一個自訂類，它擴展了 Tailwind CSS 原始碼中的 Map。

讓我們來理解這段程式碼。

constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
}

DefaultMap 是一個具有需要工廠函數的建構子的類別。 super() 呼叫父類別的建構函數，在本例中，這是 Map API，工廠函數的第二個參數是 self: DefaultMap 這表示它可以存取 Map 實例。

DefaultMap是如何初始化的？

讓我們找一個初始化 DefaultMap 的例子。 design-system.ts 示範了 DefaultMap 的用法。

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

這裡 (variant) => parseVariant(variant, designSystem) 成為我們的工廠方法，如果鍵不存在，它會添加預設值。

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }

這是parseVariant函數傳回的值。

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

我們也提供網頁開發和技術寫作服務。請透過 [email protected] 與我們聯絡以了解更多資訊！

參考：

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.tsrc/design-system.ts]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.t]