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

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:

// The require function directs the loader to attempt to load resources in the first array
// If the resources have already been loaded, their cached objects will be used
require(

  // An array of modules to load
	["dojo/on", "dojo/touch", "dijit/form/Button", "dojo/domReady!"], 

	// A callback function with loaded module objects as arguments
	// Must be added in the same order as they were loaded
	function(on, touch, Button) {

		// Now do something with the components we've loaded!

});

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

// Using 'define' instead of 'require' because we're defining a module
define(

	// Again, an array of module dependencies for the module we'd like to build
	["dojo/aspect", "dojo/_base/declare", "dijit/layout/BorderContainer"]

	// Again, a callback function which should return an object
	function(aspect, declare, BorderContainer) {

		// Return a module (object, function, or Dojo declared class)
		return declare("mynamespace.layout.CustomBorderContainer", [BorderContainer], {

			// Custom attributes and methods here

		});

})

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:

// This code is featured in the dojo/Deferred module
define([
	"./has",
	"./_base/lang",
	"./errors/CancelError",
	"./promise/Promise",
	"./has!config-deferredInstrumentation?./promise/instrumentation"
], function(has, lang, CancelError, Promise, instrumentation){

	// ...

});

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:

// Of course we need to use define to create the module
define([
	// Load dojo/declare dependency
	"dojo/declare",

	// Also load dependencies of the class we intend to create
	"dijit/form/Button",
	"dojo/on",
	"mynamespace/_MyButtonMixin" // Mixins start with "_"
], function(declare, Button, on, _MyButtonMixin) {
	
	// Return a declare() product, i.e. a class
	return declare(

		// First argument is the widget name, if you're creating one
		// Must be in object syntax format
		"mynamespace.CustomButton",

		// The second argument is a single object whose prototype will be used as a base for the new class
		// An array can also be used, for multiple inheritance
		[ Button, _MyButtonMixin ],

		// Lastly, an object which contains new properties and methods, or
		// different values for inherited properties and methods
		{
			myCustomProperty: true,

			value: "Hello!",

			myCustomMethod: function() {
				// Do stuff here!
			},

			methodThatOverridesParent: function(val) {
				this.myCustomMethod(val);

				// Calling "this.inherited(arguments)" runs the parent's method
				// of the same, passing the same params
				return this.inherited(arguments);
			}
		}
	);
});

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.

Definitives dojo/_base/declare
Klassisches JavaScript mit dojo/_base/declare
Schreiben Sie Ihr eigenes Widget

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:

// after(target, methodName, advisingFunction, receiveArguments);
aspect.after(myObject, "someMethod", function(arg1, arg2) {
	
	// Execute functionality after the myObject.doSomething function fires

}, true);

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

aspect.before(myObject, "someMethod", function(arg1, arg2) {
	
	// This function fires *before* the original myObject.someMethod does

});

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:

var self = this;
aspect.after(this.submitButton, "onClick", function() {

	// The submit button was clicked, trigger more functionality
	self.showAjaxSpinner();

});

Die Aspektressource wurde zuvor mit dojo.connect gefunden.

Aspekt-Ressourcen

dojo/aspekt Dokumentation und Beispiele
dojo/aspect verwenden

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!

// Fire an AJAX request, getting the Deferred in return
var def = xhr.get({
	url: "/getSomePage"
});

// Do lots o' callbacks
def.then(function(result) {
	result.prop = 'Something more';

	return result;
}).then(function(resultObjWithProp) {

	// ....

}).then(function() {

	// ....

});

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

require(["dojo/io/iframe"], function(ioIframe){
	// Send the request
	ioIframe.send({
		form: "myform",
		url: "handler.php",
		handleAs: "json"

	// Handle the success result
	}).then(function(data){

		// Do something

	// Handle the error case
	}, function(err){

		// Handle Error

	}). then(function() {

		// More callbacks!

	})
});

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:

// The most basic of AJAX requests
require(["dojo/request"], function(request){
	request("request.html").then(function(response){
		// do something with results
	}, function(err){
		// handle an error condition
	}, function(evt){
		// handle a progress event
	});
});

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 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:

<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Click Me!'"></div>

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

require(["dijit/form/Button"], function(Button) {
	// Create the button programmatically
	var button = new Button({
		label: 'Click Me!'
	}, "myNodeId");
});

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 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:

<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Your Application Name</title>

	<!-- custom stylesheets will go here -->

	<!-- dojo/javascript will go here -->

	</head>
	<body>

	<!-- application will go here -->

	</body>
</html>

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

// Will apply the device theme base on UA detection
require(["dojox/mobile/deviceTheme"]);

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:

// Pull in a few widgets
require([
	"dojox/mobile/ScrollableView",
	"dojox/mobile/Heading",
	"dojox/mobile/RoundRectList",
	"dojox/mobile/TabBar",
	"dojox/parser"
]);

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

<!-- sample taken from Dojo's TweetView:  http://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/app/ -->

<!-- tweets view -->
<div id="tweets" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true">
	<h1 data-dojo-type="dojox.mobile.Heading">
		<!-- the refresh button -->
		<div data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="icon: 'images/refresh.png'" class="mblDomButton tweetviewRefresh" style="float:right;"></div>
		Tweets
	</h1>
	<ul data-dojo-type="dojox.mobile.RoundRectList">
		<li data-dojo-type="dojox.mobile.ListItem">
			Tweet item here
		</li>
	</ul>
</div>

<!-- mentions view -->
<div id="mentions" data-dojo-type="dojox.mobile.ScrollableView">
	<h1 data-dojo-type="dojox.mobile.Heading">
		<!-- the refresh button -->
		<div data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="icon: 'images/refresh.png'" class="mblDomButton tweetviewRefresh" style="float:right;"></div>
		Mentions
	</h1>
	<ul data-dojo-type="dojox.mobile.RoundRectList">
		<li data-dojo-type="dojox.mobile.ListItem">
			Mention tweet item here
		</li>
	</ul>
</div>

<!-- settings view -->
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
	<h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>
	<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Show</h2>
	<ul data-dojo-type="dojox.mobile.RoundRectList">
		<li data-dojo-type="dojox.mobile.ListItem">
			Setting item here
		</li>
	</ul>
</div>

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 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:

require(["dojox/gfx", "dojo/domReady"], function(gfx) {
	
	gfx.renderer = "canvas";
	
	// Create a GFX surface
	// Arguments:  node, width, height
	surface = gfx.createSurface("surfaceElement", 400, 400);
	
	// Create a circle with a set "blue" color
	surface.createCircle({ cx: 50, cy: 50, rx: 50, r: 25 }).setFill("blue");

	// Crate a circle with a set hex color
	surface.createCircle({ cx: 300, cy: 300, rx: 50, r: 25 }).setFill("#f00");

	// Create a circle with a linear gradient
	surface.createRect({x: 180, y: 40, width: 200, height: 100 }).
	setFill({ type:"linear", 
		x1: 0,                           
		y1: 0,   //x: 0=>0, consistent gradient horizontally
		x2: 0,   //y: 0=>420, changing gradient vertically
		y2: 420,                         
		colors: [
			{ offset: 0,   color: "#003b80" },
			{ offset: 0.5, color: "#0072e5" },
			{ offset: 1,   color: "#4ea1fc" }
		]
	});

	// Create a circle with a radial gradient
	surface.createEllipse({
		cx: 120,
		cy: 260,
		rx: 100,
		ry: 100
	}).setFill({
		type: "radial",
		cx: 150,
		cy: 200,
		colors: [
			{ offset: 0,   color: "#4ea1fc" },
			{ offset: 0.5, color: "#0072e5" },
			{ offset: 1,   color: "#003b80" }
		]
	});
	
});

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:

<script>

	// x and y coordinates used for easy understanding of where they should display
	// Data represents website visits over a week period
	chartData = [
		{ x: 1, y: 19021 },
		{ x: 1, y: 12837 },
		{ x: 1, y: 12378 },
		{ x: 1, y: 21882 },
		{ x: 1, y: 17654 },
		{ x: 1, y: 15833 },
		{ x: 1, y: 16122 }
	];
		
	require([
		// Require the widget parser
		"dojo/parser",

		 // Require the basic 2d chart resource
		"dojox/charting/widget/Chart",
		
		// Require the theme of our choosing
	    "dojox/charting/themes/Claro",

		// Charting plugins: 

		// Require the Pie type of Plot 
		"dojox/charting/plot2d/Pie"

	]);

</script>


<!-- create the chart -->
<div 
	data-dojo-type="dojox.charting.widget.Chart" 
	data-dojo-props="theme:dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;">

	<!-- Pie Chart: add the plot -->
	<div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div>

	<!-- pieData is the data source -->
	<div class="series" name="Last Week's Visits" array="chartData"></div> 
</div>

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, 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:

// Declare out the name of the test module to make dojo's module loader happy.
dojo.provide("my.test.module");

// Register a test suite
doh.register("MyTests", [
	// Tests can be just a simple function...
	function assertTrueTest(){
		doh.assertTrue(true);
		doh.assertTrue(1);
		doh.assertTrue(!false);
	},
	// ... or an object with name, setUp, tearDown, and runTest properties
	{
		name: "thingerTest",
		setUp: function(){
			this.thingerToTest = new Thinger();
			this.thingerToTest.doStuffToInit();
		},
		runTest: function(){
			doh.assertEqual("blah", this.thingerToTest.blahProp);
			doh.assertFalse(this.thingerToTest.falseProp);
			// ...
		},
		tearDown: function(){
		}
	},
	// ...
]);

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:

{
	name: "Testing deferred interaction",
	timeout: 5000,
	runTest: function() {
		var deferred = new doh.Deferred();
		myWidget.doAjaxAction().then(deferred.getTestCallback(function(){
			doh.assertTrue(true);
		});
		return deferred;
	}
}

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:

var profile = {
	releaseDir: "/path/to/releaseDir",
	basePath: "..",
	action: "release",
	cssOptimize: "comments",
	mini: true,
	optimize: "closure",
	layerOptimize: "closure",
	stripConsole: "all",
	selectorEngine: "acme",
	layers: {
		"dojo/dojo": {
			include: [ "dojo/dojo", "app/main" ],
			customBase: true,
			boot: true
		}
	},
	resourceTags: {
		amd: function (filename, mid) {
			return /\.js$/.test(filename);
		}
	}
};

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:

./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js

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!