Kelas DefaultMap dalam kod sumber TailwindCSS.

Dalam artikel ini, kami menganalisis kelas DefaultMap dalam kod sumber CSS Tailwind. Ini ialah peta yang boleh menjana nilai lalai untuk kunci yang tidak wujud. Nilai lalai yang dijana ditambahkan pada peta untuk mengelakkan pengiraan semula.

/**
 * 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
  }
}

Dalam JavaScript, kami mempunyai API Peta tetapi tiada Peta Lalai. DefaultMap ini ialah kelas tersuai yang memanjangkan Peta dalam kod sumber CSS Tailwind.

Mari fahami kod ini.

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

DefaultMap ialah kelas yang mempunyai pembina yang menjangkakan fungsi kilang. super() memanggil pembina kelas induk, dalam kes ini, ini ialah API Peta dan parameter kedua fungsi kilang ialah sendiri: DefaultMap yang bermaksud ia mempunyai akses kepada contoh Peta.

Bagaimana DefaultMap dimulakan?

Mari cari contoh di mana Peta Lalai ini dimulakan. design-system.ts menunjukkan penggunaan DefaultMap.

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

Di sini (varian) => parseVariant(varian, designSystem) menjadi kaedah kilang kami yang menambah lalai jika kunci tidak wujud.

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

Ini ialah nilai yang dikembalikan oleh fungsi parseVariant.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Kami juga menyediakan perkhidmatan pembangunan web dan penulisan teknikal. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

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>

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

Atas ialah kandungan terperinci Kelas DefaultMap dalam kod sumber TailwindCSS.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!