Share
Vielleicht haben Sie diesen Tweet gesehen: „jQuery ist eine Gateway-Droge. Dies führt zu einer vollständigen Verwendung von JavaScript. “Ein Teil dieser Sucht, so behaupte ich, lernt andere JavaScript-Frameworks. Und genau darum geht es in dieser vierteiligen Serie des unglaublichen Dojo Toolkits: Sie bringen Sie zur nächsten Stufe Ihrer JavaScript-Sucht.
Bevor wir beginnen, sollte ich erwähnen, dass die einzige Voraussetzung für diese Serie ist, dass Sie zumindest über Grundkenntnisse in JavaScript verfügen. Wenn Sie zuvor eine andere JS-Bibliothek verwendet haben, sind Sie noch besser dran. Obwohl ich Dojo einige Male mit jQuery vergleiche, müssen Sie jQuery nicht kennen, um in dieser Klasse bequem zu sein.
Und noch eine Sache: Ich werde eine produzieren Screencast für jedes dieser Tutorials, das alles in den schriftlichen Tutorials abdeckt, und vielleicht ein bisschen mehr. Die Casts sind Teil des Net Premium-Abonnements. Wenn Sie also kein Mitglied sind, melden Sie sich an, um sie und eine Menge anderer unglaublicher Premium-Inhalte zu erhalten.
Dojo heißt offiziell Dojo Toolkit. Das ist eigentlich sehr passend. Die meisten anderen verfügbaren JavaScript-Zeilen rechnen sich als ab Rahmenbedingungen oder Bibliotheken. Meines Erachtens ist ein Framework eine mehr oder weniger durchgängige Lösung für die Erstellung guter Webanwendungen, und eine Bibliothek ist eine Sammlung von Tools, die Sie bei einigen spezifischen (normalerweise verwandten) Aufgaben unterstützen. Dojo passt in beide Kategorien und dann in einige. Es enthält alle DOM-Manipulations-, Ereignis- und Animationshilfen und AJAX-Funktionen, die Sie mit einer Bibliothek wie jQuery erhalten würden. Aber es gibt noch viel mehr.
Bei Ihren ersten Terminen mit Dojo werden Sie nicht genau wissen, wie viel es zu bieten hat. Ich möchte Ihnen die drei Hauptteile von Dojo vorstellen:
Wir beginnen natürlich mit Dojo auf der Seite. Ich möchte Ihnen sagen, dass Dojo nicht jQuery ist, weil es Dutzende von Dateien gibt, aus denen Dojo, Dijit und Dojox bestehen. Ich zögere, dies zu sagen, ist, dass Sie sagen, dass jQuery nicht nur eine Datei ist: Es gibt alle Plugins und Erweiterungen, die dafür gemacht wurden. Der Unterschied zu Dojo ist, dass alle diese zusätzlichen Teile offiziell Teil von Dojo sind und jederzeit auf Ihrer Webseite aufgerufen werden können.
Im Moment benötigen wir jedoch nur die Dojo-Basis. Dies ist eine Teilmenge von Dojo Core, die in einer einzigen Datei verfügbar ist. Während Sie also alles Dojo (und Digit und Dojox) herunterladen oder benutzerdefinierte Builds nur mit den gewünschten Teilen erstellen können, nehmen wir den einfachen Weg und holen uns die Basis aus dem Google-CDN.
So erstellen Sie eine index.html Datei und beginne mit dieser kleinen Vorlage:
Einführung in das Dojo, Teil 1 Eine Überschrift
Dies ist ein Absatz (wenn auch ein sehr kurz Absatz). Hier ist auch ein Link.
Ich habe ein paar Elemente in diese kleine Demo-Seite eingefügt. Wir werden sie verwenden, wenn wir das Dojo erkunden.
Ich möchte noch etwas erwähnen, bevor wir loslegen: Wenn Sie eine Bibliothek wie Dojo lernen, wird es wahrscheinlich nützlich sein, unsere Testseite in Ihrem Browser Ihrer Wahl anzuzeigen und die entsprechende JavaScript-Konsole zu öffnen. Nehmen Sie eine beliebige Codezeile in diesem Lernprogramm und fügen Sie sie in die Konsole ein. Sie werden sehen, was passiert.
In diesem Lernprogramm lernen Sie Dojo in erster Linie als Ersatz für jQuery oder die von Ihnen verwendete DOM-Bibliothek. Natürlich ist das bei dieser Titanic kaum ein Trittbrett, aber es ist ein guter Anfang. Wenn Sie es gewohnt sind, es anstelle Ihrer normalen Bibliothek zu verwenden, können wir mit dem fortfahren, was Dojo einzigartig macht.
Der übliche M.O. mit diesen dingen ist Hol es dir, benutze es; Beginnen wir also damit, DOM-Elemente zu finden.
Dojo hat mehrere Methoden, um durch das DOM zu jagen. Der erste, den wir uns ansehen, ist dojo.query, das ist sehr ähnlich dem jQuery (oder $) Methode. Übergeben Sie einfach eine CSS-Auswahlzeichenfolge, und es werden alle Elemente in Ihrem Dokument gefunden, die mit der Auswahl übereinstimmen.
Accentsconagua
dojo.query ("a"); Wenn Sie das in einer Konsole ausführen, erhalten Sie eine NodeList mit 5 Artikeln. Es enthält die fünf Ankertags, die Sie erwarten. Was erwarten Sie, wenn Sie es versuchen? dojo.query ("p> a")? dojo.query kann auch ein root- oder context-Element als zweiten Parameter annehmen. Wie zu erwarten, wird dadurch der Umfang der Abfrage auf Elemente innerhalb dieses Stammelements beschränkt. So:
dojo.query ("a", "nav"); // gibt eine 'NodeList' von 4 zurück s Der Root-Parameter kann entweder ein DOM-Element oder eine Zeichenfolge sein, die die ID eines Elements ist.
Die zurückgekehrt NodeLists haben auch eine Abfrage Diese Methode sucht nach Knoten, die mit dem Selektor übereinstimmen, der den Knoten im Original untergeordnet ist NodeList. Zum Beispiel:
dojo.query ("a"); // eine 'NodeList' von 5 s dojo.query ("p"). query ("a"); // eine 'NodeList' von 1 Aber warten Sie, es gibt noch mehr, wie sie sagen. Es gibt zwei weitere Dojo-Methoden zum Abrufen von Elementen. Wenn das gewünschte Element eine Ich würde Attribut können Sie das verwenden dojo.byId Methode.
dojo.byId ("nav"); Wenn Sie das ausprobieren, werden Sie feststellen, dass Sie keine bekommen NodeList Objekt zurück: Es ist nur ein einfaches altes DOM-Element. Dies ist wichtig zu merken.
Noch eine, und das ist noch genauer: dojo.body (). Es gibt das zurück Element vorhersagbar.
Wenn es eine "Hauptsache" gibt, für die die meisten Entwickler ihre JS-Bibliotheken verwenden, dann arbeitet sie mit DOM-Elementen. Natürlich hat Dojo auch alle Möglichkeiten dafür, also nehmen wir die Tour mit.
Wir beginnen mit der Erstellung von Elementen mit dojo.create. Zuerst können Sie einfach ein neues DOM-Element wie folgt erhalten:
var h = dojo.create ("h2"); // Einfach. Normalerweise möchten Sie jedoch mehr tun. Nun, Sie können ein Attributobjekt als zweiten Parameter übergeben:
var h = dojo.create ("section", Rolle: "banner", innerHTML: "Learning Dojo"); // role = "banner"> Dojo lernen Das dojo.create Die Methode kann auch Elemente direkt zum DOM hinzufügen. Dazu können wir die Parameter 3 und 4 hinzufügen:
dojo.create ("p", innerHTML: "Hi there!", dojo.body (), "first"); dojo.create ("h1", innerHTML: "Überschrift", dojo.query ("h1") [0], "vorher"); Der dritte Parameter wird als Referenzknoten bezeichnet. Unser neuer Knoten wird relativ zu diesem Element im DOM platziert.
Aber wo, in Bezug?
Hier kommt der vierte Parameter, die Position, zum Einsatz. Standardmäßig (d. H., Wenn Sie ihn weglassen) ist dies "last", was das neue Element an den Referenzknoten (als letztes untergeordnetes Element) anfügt. Ihre anderen Optionen sind diese:
Sie wissen es noch nicht, aber Sie haben das ziemlich gelernt dojo.attr Methode. Lassen Sie uns diese Einführung formalisieren.
dojo.attr wird verwendet, um Attribute für DOM-Knoten abzurufen und festzulegen. Denken Sie an das Attributobjekt, das wir als zweiten Parameter übergeben haben dojo.create? Sie können das als zweiten Parameter an übergeben dojo.attr. Der erste Parameter ist natürlich der Knoten, dessen Attribute geändert wurden (oder eine ID-Zeichenfolge):
var navUl = dojo.query ("p") [0]; dojo.attr (navUl, onclick: function () alert ("Dojo lernen!");), Rolle: "Banner", Stil: backgroundColor: "red", fontSize: "2em"); Wenn Sie nur ein einzelnes Attribut festlegen möchten, übergeben Sie einfach den Namen als zweiten Parameter und den Wert als dritten Parameter:
dojo.attr ("nav", "className", "module"); // erster Parameter ist eine ID-Zeichenfolge Um ein Attribut zu erhalten, sind nur zwei Parameter erforderlich:
dojo.attr (dojo.byId ("nav"), "id"); // "nav" Du kannst den ... benutzen NodeList Methode attr auf die gleiche Weise:
var items = dojo.query ("li"); items.attr ("innerHTML"); // ["Home", "Portfolio", "About", "Contact"] items.attr (className: "btn"); Eine weitere Sache: Um Attribute zu entfernen, können Sie verwenden dojo.removeAttr und das NodeList Gegenstück, um Attribute vollständig aus Elementen zu entfernen:
dojo.removeAttr ("nav", "id"); dojo.query ("# nav"). removeAttr ("id"); Es gibt jedoch auch andere Möglichkeiten, diese Knoten zu ändern. Wie wäre es mit dojo.addClass, dojo.removeClass, oder dojo.toggleClass? Sie können diese verwenden, um eine Klasse oder ein Array von Klassen auf einzelnen Knoten hinzuzufügen, zu entfernen oder umzuschalten:
var nav = dojo.byId ("nav"); dojo.addClass (nav, "ausgewählt"); Es gibt auch NodeList Gegenstücke für diese Methoden:
dojo.query ("li"). removeClass (["ausgewählt", "hervorgehoben"]); Oh, und vergiss das nicht dojo.replaceClass und das NodeList Ausführung:
dojo.query ("p"). replaceClass ("newClass", "oldClass"); Möchten Sie einen Knoten loswerden? Einfacher Weg dojo.destroy entweder ein DOM-Knoten oder eine ID-Zeichenfolge:
var navList = dojo.byId ("nav"); dojo.destroy (navList); // oder einfacher: dojo.destroy ("nav"); Ich sollte beachten, dass es keine Möglichkeit gibt, einen zu zerstören NodeList; dojo.destroy akzeptiert nur einzelne Knoten und hat keine NodeList Gegenstückmethode.
Angenommen, Sie möchten nur Knoten aus dem DOM entfernen, sie jedoch nicht wirklich zerstören. Schließlich möchten Sie sie vielleicht woanders anschließen oder wenn etwas anderes passiert. Dies ist, wo die Waise Methode kommt rein. Diese Methode ist nur eine NodeList Methode:
dojo.query ("li"). verwaist (); Auf unserer Beispielseite werden die vier entfernt s und gibt a zurück NodeList von ihnen. Wenn Sie nur möchten Waise bestimmte Knoten vom Original NodeList, pass ist eine Filterauswahl. Beachten Sie, dass dieser Filter nur mit Knoten im Original übereinstimmt NodeList, und nicht ihre Kinder:
dojo.query ("li"). verwaist ("li: first-of-type"); // wird nur der erste verwaist <li> Es wird zwar kein Element entfernt, aber ich werfe es hier hinein: dojo.empty () nimmt einen einzelnen Knoten oder eine einzige ID und entfernt alles, was sich darin befindet. Hinter den Kulissen tut Dojo eigentlich nur node.innerHTML = "". Es gibt auch ein NodeList Version dieser Methode, die offensichtlich keine Parameter erfordert.
Es gibt einige Methoden, um DOM-Knoten zu verschieben oder zu duplizieren.
Sie werden feststellen, dass Sie bereits teilweise vertraut sind dojo.place, von dojo.create. Es werden drei Parameter benötigt: der Knoten, der Referenzknoten und die Position. Wie zu erwarten, spielen diese Parameter die gleiche Rolle, in der sie spielen dojo.create:
var nav = dojo.byId ("nav"), p = dojo.query ("p") [0]; dojo.place (nav, p, "after"); // bewegt 'nav' im DOM nach 'p' Dem Trend vieler Dojo-DOM-Methoden folgend, gibt es eine NodeList Methode Gegenstück:
dojo.query ("p"). place (dojo.body (), "first"); Dann gibt es dojo.clone. Es wird zwar mehr als nur DOM-Knotenstrukturen klonen, aber dafür verwenden wir es jetzt: Wenn Sie dieser Methode einen Verweis auf einen DOM-Knoten übergeben, wird dieser Knoten und alle untergeordneten Knoten geklont oder kopiert. Dies kopiert unsere Beispielnavigation ul, und legen Sie die Kopie oben auf das Dokument:
var u2 = dojo.clone (dojo.byId ("nav")); dojo.attr (u2, "id", "nav2"); dojo.place (u2, dojo.body (), "first"); Sie können verwenden dojo.clone um auch andere JavaScript-Objekte zu klonen.
var o1 = one: "one", o2 = dojo.clone (o1); o1 === o2; // falsch
Dann ist da noch der NodeList Methode adoptieren. Ich muss zugeben, obwohl dies eine interessante Methode ist, bin ich immer noch nicht ganz sicher, wo ich sie einsetzen würde. Hier ist, was es tut: Es braucht zwei Parameter: eine Auswahlzeichenfolge oder einen DOM-Knoten und einen optionalen Positionswert, der die gleichen Optionen wie hat dojo.place (Standardmäßig "zuletzt" usw.). Dann ist die adoptieren Die Methode nimmt die übergebenen Elemente als ersten Parameter (oder die Elemente im DOM, die mit dem Selektor übereinstimmen) und positioniert sie relativ zu das erste Element in der NodeList. Dann werden die übernommenen Elemente als neue zurückgegeben NodeList. In unserer Beispielseite werden also alle Kinder der ersten ersetzt
dojo.query ("li"). adopt ("p", "nur"); Also da ist das.
Schon seit NodeLists ähneln Arrays, Sie könnten nur ein reguläres verwenden zum Schleife, um über sie zu iterieren. jedoch, NodeLists haben eine für jeden Methode:
dojo.query ("li"). forEach (Funktion (Element, Index, Arr) // erledige dein Ding); Wie Sie sehen, benötigt die Rückruffunktion drei Parameter, das Element, den Index und das Array selbst. Wenn Sie andere Arrays durchlaufen möchten, können Sie verwenden dojo.forEach auf die gleiche Art und Weise dieses Array als ersten Parameter übergeben:
dojo.forEach ([1,2,3], function (item) // act here);
für jeden gibt das zurück NodeList oder Array, mit dem Sie begonnen haben. Wenn Sie ein geändertes Array zurückgeben möchten, können Sie das verwenden Karte Methode. Was auch immer Sie von der Rückruffunktion zurückgeben, wird im Array (oder NodeList) am Ende zurückgegeben.
dojo.map ([1,2,3], function (item) return item * item;); // [1, 4, 9]
Etwas damit verbunden ist das Herausfiltern von Knoten aus einem NodeList, mit Filter.Sie können dieser Methode einfach einen CSS-Selektor übergeben, und nur die dazugehörigen Elemente werden beibehalten.
dojo.query ("li"). filter (". highlight"); // NodeList mit einer jedoch, Filter kann auch eine Rückruffunktion annehmen, die drei Parameter empfängt: das aktuelle Element, seinen Index und das Array. Wenn die Funktion zurückkehrt wahr, das Element bleibt erhalten; Ansonsten wird es ausgelassen. Ein neuer NodeList der gehaltenen Elemente wird zurückgegeben.
dojo.query ("li"). filter (function (el) return dojo.query ("a", el) [0] .innerHTML === "About";); // gibt eine NodeList zurück, die nur das Listenelement mit dem Text "About" enthält Handlich gibt es auch eine dojo.filter Version, die ein Array als ersten Parameter und den Callback als zweiten verwendet.
dojo.filter (["Nettuts", "Psdtuts", "Phototuts"], Funktion (el, idx, arr) return el.slice (0,1) === "P"); // ["Psdtuts", "Phototuts"]
Lassen Sie uns jetzt über Ereignisse mit Dojo sprechen. Und wir werden mit DOM-Events beginnen, da Sie dies normalerweise verwenden. Sagen wir, wir wollen etwas tun, wenn unser geklickt wird. Es gibt mehrere Möglichkeiten, dies zu tun, und wir werden sie alle hier besprechen.
Nehmen wir zunächst an, dass wir ein Ereignis behandeln, das auf einem oder mehreren Elementen auftritt, mit denen wir abgerufen haben dojo.query. Wir könnten die verwenden onclick Methode das NodeList rasieren:
dojo.query ("h1"). onclick (function () alert ("Learning Dojo");); Dies ist jedoch wirklich nur eine "syntaktische Zuckermethode". Hinter den Kulissen benutzt Dojo die verbinden NodeList-Methode:
dojo.query ("h1"). connect ("onclick", function (e) alert ("lernendes Dojo");); Diese Methode leitet den Job tatsächlich an eine andere Methode weiter, dojo.connect; Sie verwenden diese Methode wahrscheinlich direkt, wenn Sie über einen einzelnen DOM-Knoten verfügen, mit dem Sie ein Ereignis behandeln möchten:
var h = dojo.query ("h1") [0]; // oder dojo.byId ("some_element"), zum Beispiel dojo.connect (h, "onclick", function () alert ("learning Dojo");); Beachten Sie, dass jedes Mal, wenn wir eine Ebene nach oben verschieben, ein weiterer Parameter am Anfang des Methodenaufrufs hinzugefügt wird.
Lassen Sie uns kurz über das Trennen von Ereignissen sprechen. Bei Verwendung der auf a NodeList So gibt es derzeit keine einfache Möglichkeit, die Ereignisse zu trennen. Das ist weil dojo.connect Gibt ein Handle zurück, das beim Trennen von Ereignissen verwendet wird. Um ein Ereignis zu trennen, übergeben Sie den Handle an dojo.disconnect:
var h = dojo.query ("h1") [0], handle = dojo.connect (h, "onclick") function () alert ("dojo lernen"); dojo.disconnect (handle);); Wenn Sie das in Ihre Konsole legen, klicken Sie auf , Sie erhalten eine Benachrichtigung. Dann wird der Handler getrennt, so dass nachfolgende Klicks nichts tun.
Wenn Sie eigene Ereignisse erstellen möchten (oder mithilfe der Terminologie von Dojo eigene Themen), können Sie Dojo verwenden veröffentlichen und abonnieren Methoden. Wenn Sie mit der Funktionsweise anderer Pub / Sub-Systeme vertraut sind, haben Sie damit keine Probleme.
Um ein Thema zu abonnieren, übergeben Sie einfach den Namen des Themas und die Funktion, die ausgeführt werden soll, wenn das Thema veröffentlicht wird:
dojo.subscribe ("myTopic", Funktion (data, moreData) alert (data); console.log (moreData);); Dann können Sie das Thema fast genauso einfach veröffentlichen:
dojo.publish ("myTopic", ["einige Daten", "einige weitere Daten"]); Beachten Sie, dass alle Daten, die Sie an Funktionen übergeben möchten, die Ihr Thema abonnieren, in einem Array abgelegt und als zweiter Parameter übergeben werden.
In diesem Lernprogramm haben wir wahrscheinlich 90% der DOM-Funktionen behandelt, die in der Dojo-Basisdatei enthalten sind, die wir vom CDN von Google erhalten. Es gibt jedoch mehr zu besprechende Funktionen. Bevor wir dorthin kommen, müssen wir jedoch lernen, wie man die zusätzlichen Funktionen von Dojo in den Griff bekommt. Wir werden das und vieles mehr in der nächsten Folge dieser Serie besprechen.
Haben Sie Wünsche, was Sie gerne im Dojo lernen würden? Ich lese immer die Kommentare, damit Sie wissen, was zu tun ist!
