Advertisement
  1. Code
  2. Web Development

10 Gründe, warum Ihre Projekte das Dojo-Toolkit verwenden sollten

Scroll to top
Read Time: 17 min

German (Deutsch) translation by Valentina (you can also view the original English article)

Das leistungsfähigste und nicht ausgelastete JavaScript-Dienstprogramm ist dasselbe: das Dojo-Toolkit. Während fast jedes JavaScript-Framework oder -Toolkit alles zu tun verspricht, was Sie brauchen, macht das Dojo-Toolkit den zwingenden Grund dafür, dass diese Aussage wahr ist.  In diesem Beitrag werden viele der leistungsfähigsten Funktionen des Dojo-Toolkits behandelt. Dabei werden die Gründe genannt, warum Sie das Dojo-Toolkit für Ihr nächstes Projekt verwenden sollten.


1. Modularität und AMD-Laden

Beginnen Sie Ihr nächstes Projekt nicht, ohne sich alle Funktionen von Dojo anzusehen!

Wenn der JavaScript-Code auf Client-Seite an Größe gewinnt, wird die Modularität entscheidend sein, um unsere Anwendungen schnell, wartbar und performant zu halten. Die Tage, in denen eine Sammelbibliotheksdatei ohne asynchrones Laden verwendet wurde, sind vorbei.  Seit Jahren ist der Code des Dojo-Toolkits das leuchtende Beispiel für Modularität. Mit dojo.require (before builds) werden nur die von der Seite benötigten Ressourcen dynamisch abgerufen.  Die Standardmethode zum Laden von JavaScript-Ressourcen war synchron, obwohl es eine domänenübergreifende Option gab, die asynchron war.

Dojo ist seitdem zu einem von Rawld Gill geschriebenen asynchronen Loader übergegangen, der alle Ressourcen asynchron lädt und die Geschwindigkeit erheblich verbessert. Um einige JavaScript-Ressourcen zu laden, können Sie Folgendes wie folgt codieren:

Um ein Modul zu deklarieren, codieren Sie einfach das folgende Muster:

Diese einfache define-Methode, die von fast allen AMD-Ladern verwendet wird, ist unglaublich einfach und strukturiert. sehr ähnlich wie ein Anforderungsblock, daher sehr einfach zu bedienen. Die im Abhängigkeits-Array aufgelisteten Elemente werden geladen, bevor der Rückruf ausgeführt wird.  Der Rückruf gibt (normalerweise) eine Funktion oder ein Objekt zurück, die das Modul darstellen. Ein einfaches Muster, das schnell geladen wird, die Modularität beibehält und es den Entwicklern ermöglicht, nur das zu laden, was sie brauchen!

Der funktionsreiche Lader von Dojo bietet auch Plugins wie domReady zum Abhören der DOM-Bereitschaft und verfügt über eine Funktion-Erkennung mit hasJS. Der Lader ist auch intelligent genug, um Module abhängig von Umgebung oder Konfiguration bedingt zu laden:

Dojo ist nicht nur modular, sondern bietet Ihnen einen eingebackenen Lader!

Dojo-Modul und AMD-Ressourcen


2. Klassen und Erweiterbarkeit mit dojo/declare

Während JavaScript kein echtes Klassensystem bietet, bietet das Dojo-Toolkit ein klassenzähnliches Vererbungsmuster mit dojo/declare. Declare wird im gesamten Framework verwendet, sodass Entwickler Folgendes tun können:

  • reduzieren den wiederholten Code oder reduzieren ihn auch
  • verwenden "Mixins", um die Funktionalität mit vielen anderen Klassen zu teilen
  • bestehende Klassen können einfach erweitert werden, um die Anpassung zu erleichtern
  • teilen Codemodule zwischen verschiedenen Projekten
  • erstellen sicher "feste" Klassen, wenn in einer vorhandenen Dojo-Klasse ein Fehler auftritt

Das Klassensystem von Dojo verwendet prototypische Vererbung, sodass Prototypen vererbt werden können und Kinderklassen aufgrund des gemeinsamen Prototyps so leistungsfähig wie Eltern sein können. Die Verwendung von dojo/declare ist unglaublich einfach:

Während die obige Klasse keine echte Aufgabe ausführen soll (es handelt sich lediglich um ein Beispiel), veranschaulicht sie die Wiederverwendung von Code anhand der Vererbungskette und der Mixins. Es zeigt auch, wie eine untergeordnete Klasse dieselbe Methode einer übergeordneten Klasse aufrufen kann, um wiederholten Code zu reduzieren.

Ein weiterer Vorteil der Verwendung des Dojo-Klassensystems besteht darin, dass alle Eigenschaften und Methoden anpassbar sind. Es gibt kein "Options"-Objekt, das die Menge an Eigenschaften begrenzt, die an Dojo-Klassen angepasst werden können. Während des Klassenerstellungsprozesses kann alles leicht geändert und erweitert werden.


3. Aspekte und "Funktion zu Funktionsereignissen"

Aspekte sind eines der leistungsfähigsten und wichtigsten Elemente der fortschrittlichen Entwicklung von Webanwendungen ... und das Dojo Toolkit stellt sie seit Jahren bereit.  Anstatt Funktionen nach einem herkömmlichen Benutzerereignis auszulösen, wie z. B. сlick, mouseover oder keyup, können Sie mit Funktionen die Funktion B auslösen, bevor oder nachdem die Funktion A ausgeführt wird. Grundsätzlich können Sie Funktionen mit Funktionen verbinden - genial!

Das Auslösen einer Funktion nach einer anderen Funktion sieht wie folgt aus:

Es ist genauso einfach sicherzustellen, dass Funktion B vor Funktion A ausgelöst wird!

Aspekte sind äußerst hilfreich, wenn Sie erweiterte Benutzeroberflächen mit Dijit erstellen. Das Abhören von Ereignissen in einem Widget oder einer Klasse kann eine Änderung in anderen Widgets auslösen, sodass Entwickler aus vielen kleinen Elementen ein großes, kontrollierendes Widget erstellen können:

Die Aspektressource wurde zuvor mit dojo.connect gefunden.

Aspekt-Ressourcen


4. Verschobene und vereinheitlichte AJAX-Transporte

Ich kann dieses UI-Framework nicht genug unterstützen. Wenn ich sage, es ist unvergleichlich, kann ich nicht betonen, wie sehr ich es meine. Es ist nichts in der Nähe.

Deferreds sind objektbasierte Repräsentationen asynchroner Vorgänge, wodurch asynchrone Betriebszustände leicht von einem Ort zum anderen übergeben werden können. Eine der jüngsten und wichtigsten Ergänzungen von jQuery waren die Deferreds. Zufälligerweise ist das Mantra des Dojo-Teams "Dojo hat es getan". Das Dojo-Toolkit enthält seit mehreren Jahren Deferreds und verwendet sie für einfache und fortgeschrittene AJAX-Operationen, Animationen und mehr.

Dojo war nicht nur an vorderster Front der verzögerten Objekte, sondern hat auch eine Reihe von Methoden zur Verarbeitung von IO außerhalb des Standard-XMLHTTPRequest entwickelt, darunter ein Wrapper für window.name, dojo/io/iframe für das Hochladen von AJAX-Dateien und vieles mehr.  Wann werden also verzögerte Objekte im Dojo verwendet? Wann immer eine asynchrone Aktion / AJAX-Aktion stattfindet! Verzögerungen werden von XHR-Anfragen, dojo/io-Anfragen, Animationen und mehr zurückgegeben!

Und wie sieht die API von dojo/io/iframe aus?

Das Schöne an Dojo, das Deferreds für jeden AJAX-Vorgang verwendet, ist, dass Sie unabhängig von der Methode immer wissen, dass Sie im Gegenzug ein Deferred erhalten, was die Entwicklung beschleunigt und die API vereinheitlicht.  In Dojo 1.8 wird dojo/request eingeführt, eine neue Konsolidierung der AJAX-Methoden. Hier einige Beispiele für die zukünftige Verwendung der dojo/request-API:

Eine einheitliche API macht die Entwicklung schneller und den Code kompakter. Das neue dojo/request-Modul von Bryan Forbes verspricht, Dojo noch entwicklerfreundlicher zu machen!

Aufgeschobene und AJAX-Ressourcen


5. Dijit UI Framework

Dijit ThemeTesterDijit ThemeTesterDijit ThemeTester

Dijit ThemeTesterZweifellos ist der größte Vorteil des Dojo Toolkits gegenüber anderen JavaScript-Frameworks das Dijit-UI-Framework. Dieses einmalige Set an Layout, Formular und anderen Werkzeugen bietet:

  • vollständige "out of the box"-Lokalisierung
  • volle Unterstützung der Barrierefreiheit
  • erweiterte Layout-Widgets zur Erleichterung der Schmerzen bei Elementen mit einer Höhe von 100%, Aufwand beim Erstellen benutzerdefinierter Splitter und Layoutänderungen usw.
  • form Widgets mit erhöhter Benutzerfreundlichkeit und integrierter Validierung
  • viele Themen, von denen das neueste "claro" heißt
  • WENIGER Dateien für benutzerdefinierte Themen
  • Sehr modularer Code, der die ultimative Anpassung und Erweiterung bestehender Widgets ermöglicht

Dijit ermöglicht auch die deklarative und programmatische Erstellung von Widgets. Deklarative Widget-Erstellung sieht wie folgt aus:

... wobei traditionelle JavaScript-Widget-Erstellung wie folgt aussieht:

Es gibt mehrere Dutzend Dijit-Widgets im Dijit-Namespace und einige Dutzend weitere im Dojox-Namespace. Das Dijit-UI-Framework ist nicht nur ein paar hilfreiche UI-Widgets, wie etwa jQueryUI. Dijit ist ein für Unternehmen geeignetes, von Unternehmen getestetes UI-Framework.

Dijit UI-Ressourcen

In meinen zwei Jahren bei SitePen arbeitete ich fast ausschließlich mit Dijit und den Feinheiten der Erstellung flexibler, lokalisierbarer, effizienter Widgets.  Ich kann dieses UI-Framework nicht genug unterstützen. Wenn ich sage, es ist unvergleichlich, kann ich nicht betonen, wie sehr ich es meine. Es ist nichts in der Nähe.


6. Dojo Mobile

Dojo MobileDojo MobileDojo Mobile

Dojo MobileWie bei fast jedem Problem im Web hat Dojo eine Lösung. In diesem Fall ist Dojos Antwort auf das mobile Leben innerhalb des dojox/mobile-Namensraums. Dojos ausgezeichnete mobile Lösung bietet:

  • ein Dienstprogramm zur Geräteerkennung
  • Designs für iOS, Android, Blackberry und "Common" Thema
  • Widgets für mobile Formulare
  • Layout-Widgets und -Fenster
  • Unterstützung für Desktop, um das Debugging zu erleichtern

Mobile Widgets können wie Dijit-Widgets deklarativ oder programmgesteuert erstellt werden. Mobile Ansichten können träge gerendert werden und das Wechseln zwischen Ansichten ist nahtlos. Die HTML-Anatomie einer Dojox/Mobile-Seite ist ziemlich einfach:

Mit dojox/mobile/deviceTheme können wir das Benutzergerät erkennen und das richtige Design anwenden:

Wenn das Gerätethema vorhanden ist, müssen Sie als Nächstes die von unserer speziellen mobilen Anwendung verwendeten Widgets sowie alle anderen benutzerdefinierten Klassen verwenden, die wir wünschen:

Sobald die JavaScript-Ressourcen erforderlich sind, sollten Sie deklarativ eine Reihe von Ansichten und Widgets hinzufügen, aus denen die Anwendung besteht:

Ein unglaublicher Vorteil bei der Verwendung von Dojox / Mobile ist, dass die API für die Widget-Erstellung dieselbe ist wie für alle anderen Dijit-Klassen. Daher wird die Entwicklungsgeschwindigkeit für diejenigen erhöht, die zuvor Dijit verwendet haben. Für diejenigen, die neu im Dojo sind, ist die mobile API immer noch unglaublich einfach.

dojox/mobile Ressourcen


7. GFX und Charting

Ajax London LogoAjax London LogoAjax London Logo

Ajax London LogoZweifellos ist der größte Vorteil des Dojo Toolkits gegenüber anderen JavaScript-Frameworks das Dijit-UI-Framework.

CSS-Animationen sind ebenso wie animierte Bilder ein hervorragendes Visualisierungswerkzeug. Beide sind jedoch nicht so flexibel und leistungsstark wie das Erstellen und Bearbeiten von Vektorgrafiken.  Das beliebteste Werkzeug zur Erstellung von Vektorgrafiken auf Client-Seite war schon immer Raphael JS, aber die GFX-Bibliothek von Dojo ist zweifellos leistungsfähiger. GFX kann für die Wiedergabe von Vektorgrafiken in SVG, VML, Silverlight, Canvas und WebGL konfiguriert werden.  GFX bietet einen verwendbaren Wrapper zum Erstellen jeder Vektorgrafikform (Ellipse, Linie, Pfad usw.), um die Entwicklung zu beschleunigen. Entwickler können dabei Folgendes tun:

  • Größe der Grafiken schrägstellen, drehen und ändern 
  • Füll-, Stroker- und andere Grafikeigenschaften animieren 
  • einer Form lineare und kreisförmige Verläufe hinzufügen 
  • auf Mausereignisse zuhören und reagieren
  • Formen für eine einfachere Verwaltung und Animation gruppieren

Das Erstellen eines einfachen Satzes von Formen über einer Leinwand könnte wie folgt aussehen:

Dojo GFXDojo GFXDojo GFX

Eine API, die auf GFX geschrieben wurde, ist Dojos leistungsstarke Dojox-/Diagrammbibliothek.  Die Visualisierung der Daten über Diagramme ist aus gutem Grund beliebt. Zahlen einfach lesen, liefert nicht das ganze Bild. Die dojox/charting-Bibliothek ermöglicht Folgendes:

  • mehrere Grundstücke
  • animierte Diagrammelemente
  • Plugins, einschließlich MoveSlice (animiert Kreisdiagramm-Slices), QuickInfo, Vergrößern und Markieren
  • selbstaktualisierende Diagramme mit Dojo-Datenspeichern

Ein grundlegendes Kreisdiagramm kann mit dem folgenden Dojo-JavaScript-Code erstellt werden:

Dojo ChartingDojo ChartingDojo Charting

Während der obige Code ein einfaches Kreisdiagramm erstellt, kann Dojos Dojox-/Diagrammbibliothek noch viel mehr.

Dojox/gfx und Dojox/Diagrammressourcen


8. SitePens Dgrid

SitePen Dojo dgridSitePen Dojo dgridSitePen Dojo dgrid

SitePen Dojo dgridSitePen, eine von Dojo-Gründer Dylan Schiemann gegründete JavaScript-Beratung, suchte danach, DojoXs klobige und aufgeblähte Grid-Widgets durch ein sehr schnelles, erweiterbares und bearbeitbares Raster-Widget zu ersetzen. Sie haben diese Aufgabe mit dgrid erledigt. dgrid Funktionen:

  • zahlreiche Themen und ist leicht themeable
  • vollständige mobile Kompatibilität
  • sortierbare Zeilen
  • onDemand-Grid-Dienstprogramme, die das gezielte Laden von Netzdaten ermöglichen
  • Baumgitter-Funktionen
  • bearbeitbare Rasterinhalte mit Dijit-Widgets
  • Erweiterungen, einschließlich der Größenänderung von Spalten, Drag & Drop, Seitenumbruch und mehr

SitePen hat eine hervorragende Arbeit geleistet, in der jede Komponente von dgrid dokumentiert wurde. Die Erstellung Ihrer eigenen funktionsreichen Raster ist daher sehr einfach!

dgrid-Ressourcen


9. DOH-Testrahmen

Dojo ist nicht nur modular, sondern bietet Ihnen einen eingebackenen Lader!

Das Testen ist auf der Clientseite genauso wichtig, wenn nicht sogar wichtiger als auf der Serverseite. Aufgrund der verfügbaren Browser und der unterschiedlichen Anzahl von Funktionen, die in jeder Browserversion verfügbar sind, ist das Testen der Interaktivität auf Clientseite ein Muss.  Das Dojo Toolkit-eigene Test-Framework mit dem Spitznamen DOH (Dojo Objective Harness) wird mit jedem Download der Dojo-Version bereitgestellt. Testschreiben ist unglaublich einfach und Tests können in verschiedenen Formaten bereitgestellt werden:

Der obige Test ist ein sehr einfaches Beispiel für einen Dojo-Test, aber wie sieht es mit einer schwierigeren Situation aus, d. h. Asynchronen Aktionen?  Die offensichtlichste asynchrone Aktion ist eine AJAX-Anfrage, aber Animationen und andere Aktionen mit verzögerter Aktion führen zu einer solchen Situation. DOH bietet eine unglaublich einfache Methode zum Testen asynchroner Aktionen mit doh.Deferred-Objekten:

Im obigen Beispieltest wird die Funktion getTestCallback erst ausgelöst, wenn doAjaxAction abgeschlossen ist, und der Erfolg oder Misserfolg des Tests wird zurückgegeben.

Die nachfolgenden Tests schreiten nicht voran, bis der doh.Deferred aufgelöst wird oder das Zeitlimit überschritten wird. Daher gibt es keine Testzeitpunkte oder Überlappungsprobleme.  DOH bietet eine unglaublich zuverlässige Testsuite, die andere clientseitige Frameworks einfach nicht bieten. DOH bietet auch einen Java-betriebenen DOH-Roboter, der echte Maus- und Tastaturaktionen für präzisere und realistischere Tests simuliert.  Wenn Sie hören, wie Homer Simpson "Woohoo!" Schreit, sind alle Ihre Tests bestanden. Wenn Sie dieses gefürchtete "DOH!" hören, sind Ihre Tests fehlgeschlagen und Sie müssen Ihren Code umgestalten.

DOH-Ressourcen


10. Dojo-Erstellungsprozess

Wenn eine Webanwendung zur Veröffentlichung bereit ist, ist es aus Gründen der optimierten Last und der Zwischenspeicherung äußerst wichtig, eine minimierte JavaScript-Datei mit mehreren Ebenen zu erstellen.  Dadurch werden Anforderungen reduziert und die Belastung der Website so gering wie möglich gehalten. Besser noch ist, dass die Build-System-Analysen von Dojo Aufrufe define und diese verwenden, um Abhängigkeiten für Builds automatisch zu erkennen.  Um den Dojo-Build-Prozess zu verwenden, erstellen Sie ein so genanntes Build-Profil. Build-Profile können zahlreiche Ebenen enthalten und werden möglicherweise recht komplex. Das folgende Profil ist jedoch ein einfaches Beispiel:

Dojos Build-Prozess ist extrem anpassbar, sodass der Entwickler Folgendes anpassen kann:

  • der Minifier (Dojo's ShrinkSafe oder Google Closure)
  • die Minimierungsstufe, die auf die betroffenen CSS-Dateien angewendet werden soll, wenn Widgets erstellt werden
  • wo der Build ausgegeben wird
  • die Auswahl-Engine, die im Build verwendet werden soll
  • ...und vieles mehr!

Build-Profile werden über die Befehlszeile ausgeführt (kürzlich für NodeJS umgeschrieben), und die Befehlszeile bietet eine Vielzahl von Optionen zum Überschreiben oder Ergänzen von Einstellungen innerhalb des Build-Profils. Einige Beispiele für die Ausführung des Build-Profils sind:

Der Dojo-Buildprozess bietet eine unglaubliche Kontrolle über die generierten Builddateien und rundet den Optimierungsprozess der Webanwendung ab. Da die CSS- und JS-Funktionen minimiert und in den entsprechenden Ebenen angeordnet sind, ist Ihre Dojo-App bereit für die Showtime!


11. BONUS! "Dojos Schatztruhe": Mehr DojoX

Zwei sehr bekannte DojoX-Bibliotheken wurden bereits oben erwähnt, DojoX Mobile und GFX. Dies sind jedoch nur zwei der Dutzenden versteckter Schätze, die Dojo zur Verfügung stellt. Diese Schätze umfassen:

  • Zusätzliche Layout- und Formular-Widgets für Dijit
  • erweiterte, lokalisierte Formularvalidierungsroutinen
  • WebSocket- und Long-Polling-Wrapper
  • Bild-Widgets, einschließlich Lightbox, Diashow und Galerie-Dienstprogramme
  • fortgeschrittene IO-Helfer
  • Erweiterte Drag & Drop-Bibliotheken
  • Nodelist-Erweiterungen

Das sind nur einige Dutzende von Juwelen in DojoX. Durchsuchen Sie die Dojo-Kasse, um mehr über die fantastischen Fringe-Tools zu erfahren!

Das Dojo-Toolkit ist ein umfassendes JavaScript-Toolkit, das Folgendes bietet:

  • Grundlegende JavaScript-Sprach- und Hilfsprogramme
  • Erweiterte Javascript-Sprache und AJAX-Hilfsprogramme
  • Asynchrones Laden von On-Demand-Skripts
  • Ein vollständiges UI-Framework
  • Eine umfassende Testsuite
  • Werkzeuge erstellen
  • ...und mehr!

Beginnen Sie Ihr nächstes Projekt nicht, ohne sich alle Funktionen von Dojo anzusehen! Selbst wenn Sie einige der oben genannten erweiterten Funktionen noch nicht benötigen, können Sie mit den grundlegenden Funktionen des Dojo Toolkits (Elementabfragen, Animationen, XHR-Anforderungen) eine schnelle, funktionsreiche Webanwendung ohne Decke erstellen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.