Der Zweck dieser Blogreihe besteht darin, tief in die Lit-Bibliothek einzutauchen und ein umfassendes Verständnis ihrer einzigartigen Funktionen zu erlangen und zu erfahren, wie sie sich von anderen Bibliotheken und Frameworks auf dem Markt unterscheidet.

Die Serie ist in drei Teile gegliedert und behandelt folgende Themen:
1. Wie funktioniert lit-html?
2. Wie führt Lit Element Stapelaktualisierungen im DOM durch?
3. Ein Vergleich und Benchmarking von Lit mit anderen Frameworks und Bibliotheken sowie seinen möglichen Anwendungsfällen.

In diesem speziellen Blog konzentrieren wir uns auf die Erkundung von lit-html und seinem Innenleben. Aber bevor wir uns mit lit-html befassen, wollen wir uns zunächst einen Überblick über die Lit-Bibliothek selbst verschaffen.

Was ist Lit?

Lit ist eine schlanke Webkomponentenbibliothek mit einem geringen Platzbedarf von etwa 5 KB.

Es wurde speziell für die effiziente und schnelle Entwicklung von UI-Komponenten mithilfe von Webkomponentenspezifikationen entwickelt und steigert die Leistung durch die Einführung von Batch-Updates im DOM weiter.

Laut einem öffentlichen Benchmark vonhttps://krausest.github.io/js-framework-benchmark/index.htmlLit Element hat im Vergleich zu React eine schnellere Leistung gezeigt.

Um mehr über Lit Element zu erfahren, können Sie die offizielle Website unter besuchenhttps://lit.dev/. Der Schwerpunkt dieser Serie liegt jedoch darauf, zu verstehen, wie Lit Element funktioniert und wie es implementiert wird.

Lit Element basiert auf lit-html, einer Vorlagenbibliothek zum Erstellen von Vorlagen, und auf der Batch-DOM-Aktualisierungslogik. Lit Element erweitert lit-html durch die Bereitstellung zusätzlicher Funktionalität für Batch-Updates.

Erstellung einer lit-html-Vorlage:

Bei lit-html handelt es sich um eine JavaScript-Vorlagenbibliothek, die die Erstellung von Vorlagen mithilfe von mit JavaScript markierten Literalen und Tag-Funktionen ermöglicht und dabei native JavaScript-Funktionen und Webkomponenten nutzt.

Im Gegensatz zu JSX oder anderen Vorlagenbibliotheken erfordert lit-html keinen Build-Schritt, um Framework-spezifische Vorlagen oder Syntax in browserkompatible Vorlagen oder Syntax zu konvertieren, da es native JavaScript-Funktionen direkt nutzt.

Erstellen wir eine Vorlage mit der Lit-HTML-Bibliothek:

In diesem Beispiel importieren wir zwei Funktionen aus der lit-html-Bibliothek:
1. html, eine Tag-Funktion.
2. render, das zum Rendern der Vorlage im DOM verwendet wird.

Als nächstes definieren wir eine Funktion namens myTemplate, die ein Argument entgegennimmt name.

Die Vorlage wird mithilfe der Tag-Funktion definiert html, in hintere Häkchen (``) eingeschlossen und enthält ein HTML-Snippet <div>Hello, ${name}</div>.

Dies ${name}ist ein Platzhalter, der zur Laufzeit basierend auf dem an die Funktion übergebenen Argument dynamisch durch einen Wert ersetzt werden kann myTemplate.

Die htmlTag-Funktion gibt ein TemplateResultObjekt zurück, das die Vorlage darstellt, die im DOM gerendert werden kann.

In den kommenden Abschnitten werden wir die JavaScript-Tag-Funktion und die Implementierung der HTML-Tag-Funktion in der lit-html-Bibliothek untersuchen.

In der letzten Codezeile rufen wir die renderMethode auf, die die Vorlage rendert.
Die renderMethode akzeptiert zwei Argumente:
a) TemplateResultObjekt, das die darzustellende Vorlage darstellt.
b) Verweis auf das DOM-Element, in dem die Vorlage gerendert wird.

Tag-Funktion in JavaScript:

Hinweis: Wenn Sie bereits mit Tag-Funktionen vertraut sind, können Sie diesen Abschnitt überspringen.

Die Tag-Funktion in JavaScript ist ein spezieller Funktionstyp, der zum Verarbeiten von Vorlagenliteralen verwendet werden kann, bei denen es sich um durch hintere Häkchen (``) eingeschlossene Zeichenfolgen handelt.

Die Tag-Funktion wird unmittelbar vor der Auswertung des Vorlagenliterals aufgerufen und empfängt das Vorlagenliteral und seine interpolierten Werte als separate Argumente.

Betrachten Sie beispielsweise den folgenden Code:

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

A. Ein Array statischer Teile des Vorlagenliterals: literalString.
In unserem Beispiel literalStringist der Wert des Parameters['Hello, ', '', raw: Array(2)]

B. Ein oder mehrere Argumente, die der Anzahl der Ausdrücke im getaggten Literal entsprechen: values. In unserem Beispiel verwenden wir den Spread-Operator ( ...), um es als Array darzustellen. Sein Wert ist ['Whatfix'], der die Werte der im Vorlagenliteral verwendeten Ausdrücke enthält.

Ein tiefer Einblick in die HTML-Methode:

Hier ist eine Implementierung der htmlTag-Funktion aus dem lit-htmlRepository:https://github.com/lit/lit. (Ich habe einige Verbesserungen am Code vorgenommen, indem ich unnötige Teile entfernt habe, um ihn verständlicher zu machen.)

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

Anschließend wird ein Objekt namens „ TemplateResultmit drei Parametern erstellt und zurückgegeben.

Die drei Parameter TemplateResultumfassen _$litType$, Strings und Values[].

A. Der Parameter _$litType$ enthält den Typ.
B. Der Strings-Parameter enthält ein Array der statischen Teile der Literale.
C. Der Parameter „values[] enthält die Werte der dynamischen Teile des Literals.

In unserem vorherigen Beispiel (Vorlage – A) myTemplate("whatfix”)gibt die Methode Folgendes zurück:

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

Ein tiefer Einblick in die Render-Methode:

Die Render-Methode in lit-html ist für das Rendern der Komponente in der Benutzeroberfläche verantwortlich.
Es akzeptiert drei Argumente:

A. value – Ein Wert TemplateResult, der von der HTML-Tag-Funktion generiert wird, wie im vorherigen Abschnitt erläutert.

B. Container – Ein Verweis auf das DOM-Element, in dem die Vorlage gerendert wird.

C. Optionen – Zur Vereinfachung kann dieses Argument ignoriert werden, um den Prozess besser zu verstehen.

Mithilfe eines Flussdiagramms können wir die Funktionsweise der Render-Methode in unserem Beispiel visuell nachvollziehen.

Als nächstes verarbeiten wir unsere Beispielkomponente, Vorlage A, mithilfe des oben genannten Flussdiagramms. TemplateResultDa wir , wie im vorherigen Abschnitt besprochen, bereits ein Objekt mithilfe der HTML-Tag-Funktion generiert haben , können wir nun mit dem Rendervorgang fortfahren.

Das TemplateResultObjekt für unsere Beispielkomponente, Vorlage A, wird die folgende Struktur annehmen:

<template>Im nächsten Schritt wird das Element aus dem Objekt generiert TemplateResult.
In unserer Beispielkomponente, Vorlage A, die einen dynamischen Teil enthält, der durch dargestellt wird {name}, generieren wir eine zufällige neunstellige Zahl und fügen sie als Kommentarknoten anstelle von hinzu {name}.
Als Ergebnis <template>sieht das Element wie folgt aus: