在本文中，我們分析了 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<T = string, V = any> extends Map<T, V> {
constructor(private factory: (key: T, self: DefaultMap<T, V>) => 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<T, V>) => V) {
super()
}
DefaultMap 是一個具有需要工廠函數的建構子的類別。 super() 呼叫父類別的建構函數，在本例中，這是 Map API，工廠函數的第二個參數是 self：DefaultMap
讓我們找一個初始化 DefaultMap 的範例。 design-system.ts 示範了 DefaultMap 的用法。
let parsedVariants = new DefaultMap(
(variant) => parseVariant(variant, designSystem)
);
這裡（變體）=> parseVariant(variant, designSystem) 成為我們的工廠方法，如果鍵不存在，它會添加預設值。
return {
kind: 'arbitrary',
selector,
compounds: true,
relative,
}
這是parseVariant函數傳回的值。
在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。
透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。
我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）
我們也提供網頁開發和技術寫作服務。請透過hello@thinkthroo.com聯絡我們以了解更多資訊！
https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5
https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwinss/ss>
以上是TailwindCSS 原始碼中的 DefaultMap 類別。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
