TailwindCSS ソース コードの DefaultMap クラス。

この記事では、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 であり、ファクトリ関数の 2 番目のパラメーターは self です。これは、Map インスタンスにアクセスできることを意味します。

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 (スターを付けてください!)

Web 開発およびテクニカル ライティング サービスも提供しています。詳細については、hello@thinkthroo.com までお問い合わせください。

参考文献:

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.ts#L40

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516

以上がTailwindCSS ソース コードの DefaultMap クラス。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。