In diesem Artikel analysieren wir die DefaultMap-Klasse im Tailwind-CSS-Quellcode. Dies ist eine Karte, die Standardwerte für nicht vorhandene Schlüssel generieren kann. Generierte Standardwerte werden zur Karte hinzugefügt, um eine Neuberechnung zu vermeiden.

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

In JavaScript haben wir eine Karten-API, aber keine DefaultMap. Diese DefaultMap ist eine benutzerdefinierte Klasse, die Map im Tailwind-CSS-Quellcode erweitert.

Lassen Sie uns diesen Code verstehen.

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

DefaultMap ist eine Klasse mit einem Konstruktor, der eine Factory-Funktion erwartet. super() ruft den Konstruktor der übergeordneten Klasse auf, in diesem Fall ist dies die Map-API und der zweite Parameter der Factory-Funktion ist self: DefaultMap, was bedeutet, dass sie Zugriff auf die Map-Instanz hat.

Wie wird DefaultMap initialisiert?

Suchen wir ein Beispiel, in dem diese DefaultMap initialisiert wird. design-system.ts demonstriert die Verwendung von DefaultMap.

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

Hier wird (variant) => parseVariant(variant, designSystem) zu unserer Factory-Methode, die einen Standard hinzufügt, wenn ein Schlüssel nicht existiert.

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

Dies ist der von der parseVariant-Funktion zurückgegebene Wert.

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, lernen Sie die Best Practices kennen und erstellen Sie Projekte in Produktionsqualität.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Wir bieten auch Webentwicklung und technische Redaktionsdienste an. Kontaktieren Sie uns unter [email protected], um mehr zu erfahren!

Referenzen:

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