Heim >Web-Frontend >js-Tutorial >Sufle 3: Ein radikaler Compiler-basiertes JavaScript-Framework
Svelte 3: Ein neuer Ansatz zur Front-End-Entwicklung
In diesem Artikel wird Svelte 3 untersucht, ein einzigartiges Front-End-JavaScript-Framework, das sich durch seinen Kompilierungsprozess unterscheidet. Im Gegensatz zu Frameworks wie React, die ein großes JavaScript -Bundle versenden, erstellt SELTE -Anwendungen Anwendungen in einen deutlich kleineren, optimierten JavaScript -Code. Diese während des Build -Prozesses erreichte Optimierung führt zu schnelleren und effizienteren Anwendungen.
Svelte bietet auch einen unverwechselbaren Ansatz für das Datenmanagement und die DOM -Manipulation. Es aktualisiert direkt das reale DOM und beseitigt die Notwendigkeit eines virtuellen DOM, was zu einer verbesserten Leistung führt. Dies, verbunden mit seiner intuitiven Komponentenerstellung und eingebauten reaktiven Zuständen, macht die Entwicklung angenehm und effizient. Selbst erfahrene React- oder VUE -Entwickler finden SufleTe es wert, erforscht zu haben. Erstellen wir eine einfache Anwendung, um ihre Fähigkeiten zu demonstrieren.
Schlüsselvorteile von Sufle:
Erste Schritte:
Um die Komplexität von Bündelung und Infrastruktur zu vermeiden, folgen wir dem offiziellen Tutorial in SufleT. Stellen Sie sicher, dass Sie Knoten und Git installiert haben. Dann führen Sie:aus
<code class="language-bash">npx degit sveltejs/template github-repository-searcher</code>Dies klingt die Svelte -Vorlage in das Verzeichnis
und legt die erforderlichen Werkzeuge ein. Navigieren Sie anschließend zum Verzeichnis (github-repository-searcher
) und führen Sie <code>cd github-repository-searcher aus, um Abhängigkeiten zu installieren. Schließlich startet <code>npm install den Entwicklungsserver mithilfe von Rollup. Zugriff auf die Anwendung unter <code>npm run dev. <code>http://localhost:5000
Erstellen einer Svelt -Komponente:
Svelte -Komponenten befinden sich inDateien. Die Vorlage enthält <code>.svelte, strukturiert in drei Abschnitte: <code>App.svelte
<code>Search
{/jede}
<code>App.svelte
repositories
import <code> suche in <code> app.svelte
und verwenden Sie es bedingt basierend auf der Verfügbarkeit von <code> Repositories. <code>$:
Search.svelte
<code>filteredRepos Reaktivität und Filterung: <code>userSearchTerm <code>repositories
Die Reaktivität von
-Syntax in <code> such.svelt demonstriert. Dies stellt sicher, dass <code> FilteredRepos aktualisiert wird, wenn <code> UseSearchterm
oder <code> Repositoriesändert. Alternative Ansätze, die Funktionen oder Ereignishörer verwenden, werden ebenfalls diskutiert, wodurch die Vorteile der Reaktivitätsfunktionen von Selte hervorgehoben werden. <code>npm run build
Produktionsbau:
Ausführen <code> npm build <p>, um ein produktionsbereites Bundle zu erstellen. Die resultierende Bündelgröße ist in der Regel aufgrund des Kompilierungsprozesses von Svelte gering. </p> <p> <strong> Schlussfolgerung: </strong> </p> <ul> svelte bietet eine überzeugende Alternative zu herkömmlichen Frameworks und betont die Code -Effizienz und -leistung. Seine intuitive Syntax- und integrierte Funktionen vereinfachen die Entwicklung und machen sie zu einem starken Anwärter auf die Front-End-Entwicklung. <li> <strong> </strong> Svelte FAQ (präzise Version): </li> <li> <strong> </strong> </li> Was ist Svelte? <li> <strong> Wie unterscheidet sich Selte von React/Vue? React/vue arbeiten im Browser mehr Arbeit. </strong> </li> <li> Wie handelt es sich mit Selte-Komponenten in einer HTML/CSS/JS-ähnlichen Syntax und ist zu effizientem JavaScript kompiliert. <strong> kompiliert. </strong> </li> <li> Verwendet Svelte ein virtuelles Dom? <strong> Nein, es aktualisiert das reale DOM direkt. </strong> </li> <li> Was ist Sveltekit? <strong> </strong> Vorteile von Svelta? </li> </ul> <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173932009210437.jpg" class="lazy" alt="Svelte 3: A Radical Compiler-based JavaScript Framework"></p>Das obige ist der detaillierte Inhalt vonSufle 3: Ein radikaler Compiler-basiertes JavaScript-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!