Detaillierte Erläuterung des Svelte-Implementierungsprinzips für eine einfache und unkomplizierte JavaScript-Entwicklung

Svelte gibt es schon lange und ich wollte schon immer einen leicht verständlichen Artikel zur Prinzipanalyse schreiben. Nachdem ich es so lange aufgeschoben hatte, habe ich es endlich geschrieben.

Demo1

Schauen wir uns zunächst den Kompilierungsprozess an. Betrachten Sie den folgenden App Komponentencode:

<h1>{Anzahl}</h1>
<Skript>
  lass count = 0;
</Skript>

Dieser Code erzeugt nach der Kompilierung durch den Compiler folgenden Code, der aus drei Teilen besteht:

Methode create_fragment

count -Anweisung

Deklarationserklärung der class App

// Etwas Code weglassen...
Funktion create_fragment(ctx) {
  sei h1; 
  zurückkehren {
    C() {
      h1 = Element("h1");
      h1.textContent = `${count}`;
    },
    m(Ziel, Anker) {
      einfügen (Ziel, h1, Anker);
    },
    d(Abtrennen) {
      if (abtrennen) detach(h1);
    }
  };
} 
lass count = 0; 
Klasse App erweitert SvelteComponent {
  Konstruktor(Optionen) {
    super();
    init(diese, Optionen, null, Fragment erstellen, sicher_nicht_gleich, {});
  }
} 
Standard-App exportieren;

Fragment erstellen

Schauen wir uns zunächst die Methode create_fragment an, die vom Compiler basierend auf App UI kompiliert wird und eine Methode für die Interaktion der Komponente mit dem Browser bereitstellt. Das obige Kompilierungsergebnis enthält 3 Methoden:

c steht für create und wird verwendet, um das entsprechende DOM Element entsprechend dem Vorlageninhalt zu erstellen. In diesem Beispiel erstellen wir DOM Element das H1 entspricht:

h1 = Element("h1");
h1.textContent = `${count}`;

m steht für mount , das verwendet wird, um das von c erstellte DOM Element in die Seite einzufügen und das erste Rendering der Komponente abzuschließen. In diesem Beispiel wird H1 in die Seite eingefügt:

einfügen (Ziel, h1, Anker);

Die insert ruft target.insertBefore auf:

Funktion einfügen(Ziel, Knoten, Anker) {
  target.insertBefore(Knoten, Anker || null);
}

d steht für detach und wird verwendet, um das entsprechende DOM Element der Komponente von der Seite zu entfernen. In diesem Beispiel wird H1 entfernt:

if (abtrennen) detach(h1);

Die detach -Methode ruft parentNode.removeChild auf:

Funktion trennen (Knoten) {
  node.parentNode.removeChild(Knoten);
}

Wenn Sie sich das Flussdiagramm genau ansehen, werden Sie feststellen, dass das kompilierte Produkt App Komponente im fragment in der Abbildung nicht über die p Methode verfügt.

Dies liegt daran, dass App über keine Logik zum Ändern des Status verfügt und die entsprechende Methode daher im kompilierten Produkt nicht angezeigt wird.

Es kann festgestellt werden, dass die von create_fragment zurückgegebenen Methoden c und m für das erste Rendering der Komponente verwendet werden. Also, wer ruft diese Methoden auf?

SvelteComponent

Jede Komponente entspricht einer class , die von SvelteComponent erbt. Bei der Instanziierung wird init aufgerufen, um die Komponenteninitialisierung abzuschließen. create_fragment wird in init aufgerufen:

Klasse App erweitert SvelteComponent {
  Konstruktor(Optionen) {
    super();
    init(diese, Optionen, null, Fragment erstellen, sicher_nicht_gleich, {});
  }
}

Zusammenfassend lautet das Kompilierungsergebnis des gepunkteten Teils im Flussdiagramm in Demo1 :

fragment : kompiliert als Rückgabewert create_fragment

UI : Das Ausführungsergebnis der m Methode im create_fragment Rückgabewert

ctx : stellt den Kontext der Komponente dar. Da das Beispiel nur einen Zustand count enthält, der sich nicht ändert, ist ctx die Deklarationsanweisung von count

Demo, die den Status ändern kann

Ändern Sie nun Demo , fügen Sie die update hinzu, binden Sie das Klickereignis an H1 und ändern Sie count nach dem Klicken:

<h1 bei:Klick="{update}">{Anzahl}</h1> 
<Skript>
  lass count = 0;
  Funktion update() {
    zählen++;
  }
</Skript>

Die kompilierten Produktänderungen und die Änderungen von ctx sind wie folgt:

// Aus der Deklaration der obersten Ebene des Moduls lass count = 0; 
// Werde eine Instanzmethode function instance($$self, $$props, $$invalidate) {
  lass count = 0; 
  Funktion update() {
    $$invalidate(0, Anzahl++, Anzahl);
  } 
  zurückgeben [Anzahl, Aktualisierung];
}

count Änderungen von einer Deklarationsanweisung auf der obersten Ebene module zu einer Variablen innerhalb instance Instanzmethode. Der Grund für diese Änderung liegt darin, dass App mehrere instanziieren kann:

// Definieren Sie 3 Apps in der Vorlage
<App/>
<App/>
<App/>
// Wenn die Anzahl unveränderlich ist, wird die Seite wie folgt gerendert: <h1>0</h1>
<h1>0</h1>
<h1>0</h1>

Wenn count unveränderlich ist, können alle App dieselbe count wiederverwenden. Wenn count jedoch variabel ist und von der Häufigkeit abhängt, mit der auf unterschiedliche App geklickt wird, kann die Seite folgendermaßen gerendert werden:

<h1>0</h1>
<h1>3</h1>
<h1>1</h1>

Daher muss jede App über einen unabhängigen Kontext verfügen, um count zu speichern. Dies ist der Sinn instance . Im Allgemeinen verfolgt der Svelte -Compiler alle Variablendeklarationen innerhalb von <script> :

• Enthält es Anweisungen, die die Variable ändern, wie z. count++
• Ob es Neuzuweisungsanweisungen enthält, wie z. count = 1
• Warten Sie auf die Situation

Sobald die Variable gefunden wurde, wird sie in instance extrahiert und der Rückgabewert nach Ausführung instance ist ctx .

Wenn gleichzeitig auf die Anweisung, die die obige Operation ausführt, über die Vorlage verwiesen werden kann, wird die Anweisung mit $$invalidate umschlossen.

In Demo2 erfüllt die update -Methode:

• Enthält Anweisungen, die count ändern – count++
• Kann über die Vorlage referenziert werden - als Klick-Callback-Funktion

Daher wird die Anweisung, dass die Änderungen im kompilierten update count , von $$invalidate umschlossen:

// im Quellcode aktualisieren
Funktion update() {
  zählen++;
} 
// Update in kompilierter Instanz
Funktion update() {
  $$invalidate(0, Anzahl++, Anzahl);
}

• Aktualisieren Sie den Wert des gespeicherten Status in ctx , z. B. count++ in Demo2
• dirty alle count in App UI die sich ändern werden.
• Planen Sie das Update. Planen Sie dieses Update in microtask . Alle in derselben macrotask ausgeführten $$invalidate werden nach Abschluss macrotask einheitlich ausgeführt, und schließlich wird p Methode im fragment ausgeführt.

Die p -Methode ist ein neues Kompilierungsprodukt in Demo2 . Zusätzlich zu p werden auch die vorhandenen Methoden von create_fragment entsprechend geändert:

C() {
  h1 = Element("h1");
  //Der Wert von count wird aus ctx ermittelt t = text(/*count*/ ctx[0]);
},
m(Ziel, Anker) {
  einfügen (Ziel, h1, Anker);
  anhängen(h1, t);
  // Ereignisbindung dispose = listen(h1, "click", /*update*/ ctx[1]);
},
p(ctx, [schmutzig]) {
  // set_data aktualisiert den in t gespeicherten Textknoten if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]);
},
d(Abtrennen) {
  if (abtrennen) detach(h1);
  // Ereignisbindung aufheben dispose();
}

Die Methode p führt die Aktualisierungsfunktion aus, die dem in $$invalidate als dirty markierten Element entspricht.

In Demo2 wird in App UI nur auf die count der Zustände verwiesen, sodass in der update -Methode nur eine if Anweisung vorhanden ist. Wenn in UI auf mehrere Zustände verwiesen wird, enthält die p Methode auch mehrere if -Anweisungen:

// Verweisen Sie auf mehrere Zustände in der Benutzeroberfläche<h1 on:click="{count0++}">{count0}</h1>
<h1 bei:Klick="{count1++}">{count1}</h1>
<h1 bei:Klick="{count2++}">{count2}</h1>

Die entsprechende p Methode enthält mehrere if -Anweisungen:

p(neu_ctx, [schmutzig]) {
  ctx = neuer_ctx;
  wenn (dirty & /*Anzahl*/ 1) set_data(t0, /*Anzahl*/ ctx[0]);
  wenn (dirty & /*Anzahl1*/ 2) set_data(t2, /*Anzahl1*/ ctx[1]);
  wenn (dirty & /*Anzahl2*/ 4) set_data(t4, /*Anzahl2*/ ctx[2]);
},

Die vollständigen Aktualisierungsschritte Demo2 sind wie folgt:

1. Klicken Sie auf H1 , um die update der Callback-Funktion auszulösen
2. Rufen Sie $$invalidate im update auf, aktualisieren Sie count in ctx , markieren Sie count als dirty und planen Sie das Update
3. Führen Sie die p Methode aus, geben Sie das der if Anweisung entsprechende dirty -Element ( count ) ein und führen Sie die Methode aus, um das entsprechende DOM Element zu aktualisieren

Oben finden Sie den detaillierten Inhalt der detaillierten Erklärung der Implementierungsprinzipien von Svelte in der JavaScript-Entwicklung. Weitere Informationen zu den Implementierungsprinzipien von Svelte finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!