Ember.js: Das perfekte Framework für Webanwendungen

ember.js ist ein modernes Front-End-JavaScript-Framework, das sich auf Konventionen und Überkonfigurationen konzentriert und in letzter Zeit viel Aufmerksamkeit erregt hat. In diesem Artikel werden die Schlüsselkonzepte des Frameworks und seiner Implementierungsfunktionen eingeführt, indem eine einfache Würfelrollanwendung erstellt wird.

Unsere Beispielanwendung ist ein Würfel -Roll -Programm, mit dem Benutzer Würfel rollen und den Verlauf anzeigen können. Der vollständige Code für die App ist auf GitHub verfügbar.

ember.js integriert viele moderne JavaScript -Konzepte und -technologien, einschließlich, aber nicht beschränkt auf:

• Unterstützung ES2016 mit dem Babel -Übersetzer.
• Standardeinheit, Integrations- und Akzeptanztestunterstützung, mit Testem und QTest betrieben.
• Ressourcen mit Brokkoli.js erstellen.
• Unterstützen Sie Echtzeit-Nachlade- und Verkürzungs-Entwicklungszyklus.
• Verwenden Sie die Lenker -Template -Syntax.
• URL -Routing wird bevorzugt, um die vollständige Unterstützung für Deep -Links zu gewährleisten.
• Erstellen Sie eine vollständige Datenschicht basierend auf der JSON -API, aber andere API -Zugriffsmethoden können nach Bedarf eingefügt werden.

Um Ember.js zu verwenden, müssen Sie die neuesten Versionen von Node.js und NPM installieren. Wenn nicht, können Sie es von der offiziellen Website von Node.js. herunterladen und installieren.

Zu bemerken, Ember.js ist rein Front-End-Framework. Es gibt mehrere Möglichkeiten, mit dem Backend Ihrer Wahl zu interagieren, aber das Backend selbst wird von Ember.js nicht behandelt.

Schlüsselpunkte

• ember.js ist ein umfassendes Front-End-JavaScript-Framework, das moderne JavaScript-Funktionen und -Tools in ein einzelnes, konsistentes Paket integriert, das ideal für das Erstellen von Webanwendungen ist.
• Dieses Framework basiert auf dem Prinzip der "Konvention über die Konfiguration" und vereinfacht den Entwicklungsprozess durch angemessene Standardeinstellungen und Best Practices, wodurch der Entwicklungszyklus beschleunigt und die Einstellungszeit verkürzt wird.
• Ember-Cli (Ember's Command Line Interface) ist ein leistungsstarkes Tool, das den gesamten Entwicklungslebenszyklus von der Erstellung und Entwicklung von Projekten bis hin zu Tests und Bereitstellungen verwaltet und so die Produktivität und Effizienz erhöht.
• ember.js unterstützt nativ leistungsstarke URL-Routing und Deep-Verknüpfung, um sicherzustellen, dass Anwendungen SEO-freundlich sind und die Wartbarkeit mit einer klaren Navigationsstruktur aufrechterhalten.
• Das Framework enthält eine integrierte Datenschicht zum Verwalten von Dateninteraktionen zwischen Clients und Servern.
• Test ist der erste Bürger in Ember.js, der Unit -Tests, Integrationstests und Akzeptanztests unterstützt, die von Tools wie Testem und Qest betrieben werden, um die Zuverlässigkeit und Qualität Ihrer Anwendung zu gewährleisten.
• ember.js verwendet Komponenten und Vorlagen, um die Entwicklung wiederverwendbarer und wartbarer Benutzeroberflächenelemente zu vereinfachen und die Best Practices im Design und Architektur von Webanwendungen zu ermöglichen.

Einführung Ember-Cli

ember.js 'Kraft stammt von der CLI -Befehlszeilenschnittstelle (CLI). Dieses Tool, das Ember-Cli anerkannt hat, wird den größten Teil des Entwicklungslebenszyklus von Ember.js-Anwendungen, vom Erstellen von Anwendungen, dem Hinzufügen von Funktionen, zum Ausführen von Testsuiten und zum Starten tatsächlicher Projekte im Entwicklungsmodus entschließt.

Bei der Entwicklung einer Ember.js -Anwendung wird dieses Tool in gewissem Maße beinhalten. Daher ist es wichtig zu verstehen, wie man ihn am besten benutzt. Wir werden es in diesem Artikel verwenden.

Zunächst müssen wir sicherstellen, dass die CLI von Ember.js korrekt installiert und aktualisiert wird. Dies kann durch die Installation von NPM wie folgt erfolgen:

<code class="language-bash">$ npm install -g ember-cli</code>

können wir überprüfen, ob es erfolgreich installiert wurde, indem der folgende Befehl ausgeführt wurde:

<code class="language-bash">$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64</code>

Erstellen Sie Ihre erste ember.js App

Nach dem Installieren von Ember-Cli können Sie Anwendungen erstellen. Hier verwenden wir zum ersten Mal das Ember.js -CLI -Tool - es erstellt die gesamte Anwendungsstruktur und stellt alles für die Ausführung auf.

<code class="language-bash">$ ember new dice-roller
... (安装过程输出) ...</code>

Dies erstellt eine vollständige Anwendung, die sofort ausgeführt werden kann. Es wird sogar Git als Quellungssteuerung eingerichtet, um Ihre Arbeiten zu verfolgen.

Hinweis: Sie können die Git -Integration deaktivieren, wenn Sie möchten, oder Sie können Garn anstelle von NPM verwenden. Dies und mehr werden in der Hilfsdokumentation des Tools beschrieben.

Lassen Sie uns jetzt sehen, wie es aussieht. Verwenden Sie Ember-Cli, um die Ember-Anwendung für die Entwicklung zu starten:

<code class="language-bash">$ npm install -g ember-cli</code>

Jetzt sind wir bereit. Die Anwendung wird unter https://www.php.cn/link/988aaaaa9bd19c1e0f8043a132bbf1af3 wie folgt:

Es wird auch einen Leberoad -Dienst ausgeführt, der die Änderungen des Dateisystems automatisch überwacht. Dies bedeutet, dass Sie bei der Optimierung Ihres Website -Designs sehr schnelle Ablaufzeiten haben können.

Versuchen wir es?

app/templates/application.hbs Auf der Anfangsseite wird bereits angezeigt, was zu tun ist. Ändern wir also die Hauptseite und sehen, was passiert. Wir werden die

Datei so ändern, dass sie so aussehen:

<code class="language-bash">$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64</code>

{{outlet}} HINWEIS: Das

-Tag ist Teil dessen, wie das Ember -Routing funktioniert. Wir werden es später abdecken.

Das erste, was zu beachten ist, ist die Ausgabe von Ember-Cli, die so aussehen sollte:

<code class="language-bash">$ ember new dice-roller
... (安装过程输出) ...</code>

Dies sagt uns, dass wir die Vorlage geändert und wieder aufgebaut und neu gestartet haben. Wir haben keine Teilnahme an diesem Teil des Inhalts.

Schauen wir uns jetzt den Browser an. Wenn Sie in der Linderung installiert und ausgeführt wurden, müssen Sie Ihren Browser nicht einmal aktualisieren, um ihn aufzunehmen, andernfalls müssen Sie die aktuelle Seite neu laden.

Obwohl es nicht sehr interessant war, haben wir dies erreicht, ohne irgendwelche Mühe zu geben.

Zusätzlich haben wir auch eine vollständig festgelegte Testsuite, die funktioniert. Wie erwartet wird dies auch mit dem Ember -Tool ausgeführt:

<code class="language-bash">$ cd dice-roller
$ ember serve
... (启动过程输出) ...</code>

Beachten Sie, dass Phantomjs im Ausgang erwähnt wird. Dies liegt daran, dass Integrationstests, die im Browser ausgeführt werden, vollständig unterstützt werden, was standardmäßig im Phantomjs -Browser kopflos ausgeführt wird. Wenn Sie es vorziehen, können Sie sie in anderen Browsern vollständig ausführen. Bei der Einrichtung einer kontinuierlichen Integration (CI) lohnt es sich, sicherzustellen, dass Ihre Anwendung in allen unterstützten Browsern ordnungsgemäß funktioniert.

... (Der verbleibende Inhalt ähnelt dem Originaltext. Einige Sätze können nach Bedarf angepasst werden, um die Gesamtbedeutung unverändert zu halten, und das Bildformat und die Position bleiben erhalten)

Das obige ist der detaillierte Inhalt vonEmber.js: Das perfekte Framework für Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!