Heim > Web-Frontend > js-Tutorial > DefaultMap-Klasse im TailwindCSS-Quellcode.

DefaultMap-Klasse im TailwindCSS-Quellcode.

Barbara Streisand
Freigeben: 2024-10-10 06:18:02
Original
704 Leute haben es durchsucht

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<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
  }
}
Nach dem Login kopieren

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<T, V>) => V) {
    super()
}
Nach dem Login kopieren

DefaultMap ist eine Klasse, die über einen Konstruktor verfügt, 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 es 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.

DefaultMap class in TailwindCSS source code.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );
Nach dem Login kopieren

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

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }
Nach dem Login kopieren

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

Über uns:

Bei Think Throo haben wir die Mission, 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, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

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 hello@thinkthroo.com, 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



Das obige ist der detaillierte Inhalt vonDefaultMap-Klasse im TailwindCSS-Quellcode.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage