dojo
Hallo Dojo
Suche…
Einführung
Ein einfaches Hallo Dojo wie Hello World in anderen Programmiersprachen. Dojo ist einfach zu installieren / konfigurieren und zu verwenden. Sie können die neueste Version von Dojo von http://dojotoolkit.org/download/ herunterladen, oder Sie können so genannte CDNs in Ihrem Projekt verwenden. Ich ziehe es vor, es herunterzuladen und zu verwenden. Die aktuellste Version zum Zeitpunkt dieses Themas ist 1.12.1. Derzeit wird an Dojo 2.0 gearbeitet.
Hallo Welt
Erstellen Sie eine HTML-Datei wie unten. Im Skript-Tag können Sie entweder den CDN-Link oder von Ihrem lokalen aus verwenden
<script type="text/javascript" src="dojo/dojo/dojo.js"
data-dojo-config="async:true">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
Das ist es. Wenn Sie diesen HTML-Code ausführen, sollte Hello angezeigt werden. Ja, wir verwenden in diesem Beispiel noch keinen Dojo-spezifischen Code. Dies zeigt jedoch, wie Sie mit Dojo eine einfache Seite erstellen. Als Nächstes werden wir sehen, wie wir Dojo auf diese einfache Seite anwenden können.
Dojo AMD
Im nächsten Beispiel verwenden wir Dojo-Funktionen und verstehen, was AMD (Asynchronous Module Definition) bedeutet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
Der Unterschied zum vorherigen Beispiel besteht darin, dass es ein zusätzliches Skript-Tag gibt, in dem nur wenige Dojo-Funktionen verwendet werden. Lass uns jeden von ihnen sehen
In Laien Begriff erfordert, benötigen ist ähnlich zu importieren oder mit Aussagen in anderen Sprachen , in denen Sie einige OOTB Bibliotheken importieren (in Dojo nennen Sie sie Module). Bestehende Module werden mit dem Schlüsselwort 'required' geladen und neue Module werden mit dem Schlüsselwort 'define' erstellt. Im späteren Abschnitt erfahren Sie mehr über Module. Für dieses Beispiel haben wir zwei OOTB-Module "dojo / dom" und "dojo / dom-construct" verwendet. dojo / dom (dom) ist das Kern-DOM (Document Object Model), mit dem ein Knoten aus HTML abgerufen werden kann. Für JavaScript-Entwickler ähnelt es tatsächlich document.getElementById (''). Intern verwendet Dojo dieselbe Methode. dojo / dom-construct (domConstruct) wird zum Erstellen von Knoten wie div, li, ul usw. verwendet. Die DOM-Konstruktions-API kann auch verwendet werden, um einen Knoten an einer beliebigen Position in DOM einzufügen. Nehmen wir an, Sie haben ein div 'abc' und möchten ein weiteres div 'xyz' erstellen und nach 'abc' platzieren. Das kannst du gerne schaffen
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Um auf unser Beispiel zurückzukommen, haben wir
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
Innerhalb der Funktion sehen Sie dom und domConstruct. So bezeichnen wir Dojo / Dom und Dojo / Dom-Konstrukt. Sie können die gewünschte Namenskonvention verwenden
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Es ist jedoch eine gute Praxis, wenn Sie sinnvolle Namen haben, z. B. für dojo / dom use dom und für dojo / dom-construct, Benutzer domConstruct.
Jetzt haben wir innerhalb der Funktion
var greetingNode = hi.byId('greeting');
Was dies tut, ist, dass es den a dom (div in diesem Fall) mit id = 'Begrüßung' durchsucht. Variable BegrüßungsNode, wird den tatsächlichen Dom-Knoten haben. Dann haben wir,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Hier fügen wir Dojo hinzu! zum Knoten Begrüßungsknoten. Das ist wie Hallo + Dojo! und die Ausgabe wird Hallo Dojo sein!
So haben wir gelernt
- So verwenden Sie Dojo-Funktionen
- Verwendung von OOTB-Modulen
- Dom manipulieren