Peut-être avez-vous vu ce tweet: «jQuery est un médicament d'initiation. Cela mène à une utilisation complète de JavaScript. »Une partie de cette dépendance, affirme-t-il, consiste à apprendre d'autres frameworks JavaScript. Et voilà en quoi consiste cette série en quatre parties sur l'incroyable Dojo Toolkit: vous faire passer au niveau suivant de votre dépendance à JavaScript.
Avant de commencer, je devrais mentionner que la seule condition préalable à cette série est que vous ayez au moins une connaissance de base de JavaScript. Si vous avez déjà utilisé une autre bibliothèque JS, vous serez encore mieux loti. Mais, bien que je compare Dojo à jQuery plusieurs fois, vous n'avez pas besoin de connaître jQuery pour être à l'aise dans cette classe..
Et encore une chose: je produirai un screencast pour chacun de ces tutoriels, couvrant tout le contenu des tutoriels écrits, et peut-être un peu plus. Les 'diffusions font partie de l’abonnement Net Premium. Si vous n’êtes pas membre, inscrivez-vous pour les obtenir et recevez une tonne de contenu Premium incroyable..
Dojo est officiellement appelé le Dojo Boîte à outils. C'est vraiment très approprié. La plupart des autres collections de lignes de JavaScript disponibles se présentent comme cadres ou les bibliothèques. Dans mon esprit, un framework est une solution plus ou moins complète permettant de créer de bonnes applications Web, et une bibliothèque est un ensemble d’outils qui vous aident à effectuer quelques tâches spécifiques (généralement liées). Dojo appartient aux deux catégories, et à d'autres encore. Il contient toutes les manipulations du DOM, des assistants pour les événements et l'animation, ainsi que les fonctions AJAX que vous obtiendriez avec une bibliothèque comme jQuery. Mais il y a plus, beaucoup plus.
Lors de vos premiers rendez-vous avec Dojo, vous ne réaliserez pas tout ce que cela a à faire. Alors, laissez-moi vous présenter les trois parties principales du Dojo:
Nous commencerons bien sûr par obtenir Dojo sur la page. Je tiens à vous dire que Dojo n'est pas comme jQuery, car il existe des dizaines de fichiers qui constituent Dojo, Dijit et Dojox. La raison pour laquelle j'hésite à dire que c'est parce que vous allez dire que jQuery n'est pas un fichier: il y a tous les plugins et extensions qui sont faits pour ça. La différence avec Dojo est que toutes ces parties supplémentaires font officiellement partie de Dojo et peuvent être appelées à tout moment sur votre page Web..
Cependant, pour le moment, nous n’avons besoin que de la base Dojo. Ceci est un sous-ensemble de Dojo Core, disponible dans un seul fichier. Ainsi, bien que vous puissiez télécharger tout Dojo (et Digit et Dojox), ou en créer des versions personnalisées avec juste les parties de votre choix, nous allons suivre la voie facile et obtenir la base à partir du CDN de Google..
Alors, créez un index.html
déposer et commencer avec ce petit modèle:
Introduction au Dojo, partie 1 Un en-tête
Ceci est un paragraphe (bien que très court paragraphe). Aussi, voici un lien.
J'ai inclus de nombreux éléments dans cette petite page de démonstration. Nous les utiliserons lorsque nous explorerons le Dojo.
Je mentionnerai encore une chose avant de commencer: lorsque vous apprendrez une bibliothèque comme Dojo, vous trouverez probablement utile de consulter notre page de test dans le navigateur de votre choix et d'ouvrir la console JavaScript correspondante. Prenez n'importe quelle ligne de code de ce didacticiel et collez-la dans la console pour voir ce qui se passe..
Dans ce didacticiel, nous allons principalement apprendre à utiliser Dojo en remplacement de jQuery, ou de toute bibliothèque orientée DOM que vous utilisez. Bien sûr, ce titanic n’est pas un plancher, mais c’est un bon point de départ. Une fois que vous êtes à l'aise avec son utilisation à la place de votre bibliothèque habituelle, nous pouvons expliquer ce qui rend Dojo unique..
L'habituel M.O. avec ces choses est l'obtenir, l'utiliser; alors, commençons par trouver des éléments DOM.
Dojo a plusieurs méthodes pour chasser à travers le DOM. Le premier que nous allons examiner est dojo.query
, qui ressemble beaucoup à la jQuery
(ou $
) méthode. Il suffit de lui passer une chaîne de sélecteur CSS, et il trouvera tous les éléments de votre document qui correspondent au sélecteur.
dojo.query ("a");
En exécutant cela dans une console, vous aurez un NodeList
avec 5 éléments. Il contient les cinq balises d'ancrage que vous attendez. Qu'espérez-vous obtenir lorsque vous essayez dojo.query ("p> a")
? dojo.query
peut également prendre une racine ou un élément de contexte en tant que second paramètre. Comme on pouvait s'y attendre, cela limite la portée de la requête aux éléments situés à l'intérieur de cet élément racine. Alors:
dojo.query ("a", "nav"); // retourne une 'NodeList' de 4 s
Le paramètre racine peut être un élément DOM ou une chaîne identifiant un élément..
Le rendu NodeList
s ont aussi un question
méthode, qui recherche les nœuds correspondant au sélecteur qui sont les enfants des nœuds de la configuration d'origine. NodeList
. Par exemple:
dojo.query ("a"); // une 'NodeList' de 5 s dojo.query ("p"). query ("a"); // une 'NodeList' de 1
Mais attendez, il y a plus, comme on dit. Il existe deux autres méthodes Dojo pour obtenir des éléments. Si l'élément que vous voulez a un identifiant
attribut, vous pouvez utiliser le dojo.byId
méthode.
dojo.byId ("nav");
Si vous essayez cela, vous remarquerez que vous ne recevez pas NodeList
object back: c'est juste un ancien élément du DOM. Ce sera important de se rappeler.
Un de plus, et c'est encore plus précis: dojo.body ()
. Il retourne le élément, prévisible.
Maintenant, s’il existe une «chose principale» pour laquelle la plupart des développeurs utilisent leurs bibliothèques JS, c’est le travail avec des éléments DOM. Bien sûr, le Dojo dispose de toutes les installations nécessaires pour cela, alors faisons le tour.
Nous allons commencer par créer des éléments, avec dojo.create
. Premièrement, vous pouvez simplement obtenir un nouvel élément DOM comme ceci:
var h = dojo.create ("h2"); //
Simple. Mais, généralement, vous voulez faire plus. Eh bien, vous pouvez passer un objet d'attributs en tant que second paramètre:
var h = dojo.create ("section", role: "banner", innerHTML: "Learning Dojo"); //role = "banner"> Apprentissage du Dojo
le dojo.create
méthode peut également ajouter des éléments directement au DOM. Pour cela, nous pouvons ajouter les paramètres 3 et 4:
dojo.create ("p", innerHTML: "Bonjour!", dojo.body (), "premier"); dojo.create ("h1", innerHTML: "titre", dojo.query ("h1") [0], "avant");
Le troisième paramètre s'appelle le nœud de référence; notre nouveau noeud sera placé dans le DOM par rapport à cet élément.
Mais où, en référence?
C’est là que les quatrièmes paramètres, la position, entrent en jeu. Par défaut (c’est-à-dire si vous l’écartez), il s’agit de «last», qui ajoute le nouvel élément au nœud de référence (en tant que dernier enfant). Vos autres options sont les suivantes:
Vous ne le savez pas encore, mais vous avez à peu près appris la dojo.attr
méthode. Formalisons cette introduction.
dojo.attr
est utilisé pour obtenir et définir des attributs sur des nœuds DOM. Rappelez-vous que les attributs objet que nous avons passé en tant que deuxième paramètre à dojo.create
? Vous pouvez passer cela comme second paramètre à dojo.attr
. Le premier paramètre, bien sûr, est le nœud dont les attributs sont modifiés (ou une chaîne d'identifiant):
var navUl = dojo.query ("p") [0]; dojo.attr (navUl, onclick: function () alert ("Apprentissage Dojo!");, rôle: "bannière", style: backgroundColor: "rouge", fontSize: "2em");
Si vous souhaitez simplement définir un seul attribut, il suffit de passer le nom en tant que deuxième paramètre et la valeur en tant que troisième:
dojo.attr ("nav", "className", "module"); // le premier paramètre est une chaîne d'identifiant
Pour obtenir un attribut, seuls deux paramètres sont requis:
dojo.attr (dojo.byId ("nav"), "id"); // "nav"
Vous pouvez utiliser le NodeList
méthode attr
de la même manière:
var items = dojo.query ("li"); items.attr ("innerHTML"); // ["Accueil", "Portfolio", "À propos de", "Contact"] items.attr (className: "btn");
Une dernière chose: pour supprimer des attributs, vous pouvez utiliser dojo.removeAttr
et le NodeList
contrepartie pour supprimer complètement les attributs des éléments:
dojo.removeAttr ("nav", "id"); dojo.query ("# nav"). removeAttr ("id");
Il existe cependant d'autres moyens de modifier ces nœuds. Que diriez-vous dojo.addClass
, dojo.removeClass
, ou dojo.toggleClass
? Vous pouvez les utiliser pour ajouter, supprimer ou basculer une classe ou un tableau de classes sur des nœuds simples:
var nav = dojo.byId ("nav"); dojo.addClass (nav, "sélectionné");
Il y a aussi NodeList
homologues pour ces méthodes:
dojo.query ("li"). removeClass (["sélectionné", "en surbrillance"]);
Oh, et n'oublie pas dojo.replaceClass
et le NodeList
version:
dojo.query ("p"). replaceClass ("newClass", "oldClass");
Voulez-vous vous débarrasser d'un nœud? Facile: passe dojo.destroy
soit un nœud DOM ou une chaîne d'identifiant:
var navList = dojo.byId ("nav"); dojo.destroy (navList); // ou plus facile: dojo.destroy ("nav");
Je devrais noter qu’il n’ya aucun moyen de détruire un NodeList
; dojo.destroy
accepte uniquement les nœuds simples, et n'a pas de NodeList
méthode de contrepartie.
Mais supposons que vous souhaitiez simplement supprimer les nœuds du DOM sans les détruire. Après tout, vous voudrez peut-être les brancher ailleurs, ou quand quelque chose d'autre se produit. C'est là que le orphelin
méthode vient en. Cette méthode est seulement un NodeList
méthode:
dojo.query ("li"). orphan ();
Sur notre page d'exemple, cela supprime les quatre
s et retourne un NodeList
d'eux. Si vous voulez seulement orphelin
certains nœuds de l'original NodeList
, pass est un sélecteur de filtrage. Notez que ce filtre ne correspond qu'aux nœuds de l'original. NodeList
, et non leurs enfants:
dojo.query ("li"). orphan ("li: premier type"); // ne sera orphelin que le premier <li>
Bien que cela ne supprime pas un élément, je vais ajouter ceci ici: dojo.empty ()
prendra un seul nœud ou id et supprimera tout ce qu'il contient. Dans les coulisses, Dojo est en train de faire node.innerHTML = ""
. Il y a aussi un NodeList
version de cette méthode qui, évidemment, ne nécessite aucun paramètre.
Il existe plusieurs méthodes liées au déplacement ou à la duplication de nœuds DOM.
Vous constaterez que vous êtes déjà partiellement familiarisé avec dojo.place
, de dojo.create
. Il faut trois paramètres: le nœud, le nœud de référence et la position. Comme on pouvait s’y attendre, ces paramètres jouent les mêmes rôles qu’ils jouent dans dojo.create
:
var nav = dojo.byId ("nav"), p = dojo.query ("p") [0]; dojo.place (nav, p, "après"); // déplace 'nav' juste après 'p' dans le DOM
Suivant la tendance de tant de méthodes DOM Dojo, il existe un NodeList
contrepartie de la méthode:
dojo.query ("p"). place (dojo.body (), "premier");
Puis il y a dojo.clone
. Bien que les structures de nœud DOM ne soient pas clonées, nous l'utilisons maintenant: si vous transmettez à cette méthode une référence à un nœud DOM, elle clonera ou copiera ce nœud et tous ses enfants. Cela va dupliquer notre exemple de navigation ul
, et placez la copie en haut du document:
var u2 = dojo.clone (dojo.byId ("nav")); dojo.attr (u2, "id", "nav2"); dojo.place (u2, dojo.body (), "premier");
Vous pouvez utiliser dojo.clone
pour cloner d'autres objets JavaScript aussi.
var o1 = un: "un", o2 = dojo.clone (o1); o1 === o2; // faux
Ensuite, il y a le NodeList
méthode adopter
. Je dois admettre que, même s’il s’agit d’une méthode intéressante, je ne sais toujours pas exactement où je l’utiliserais. Voici ce que cela fait: il faut deux paramètres: une chaîne de sélecteur ou un ou plusieurs noeuds DOM, et une valeur de position optionnelle, qui a les mêmes options que dojo.place
(“Dernier” par défaut, etc.). Puis le adopter
méthode prendra les éléments que vous avez passés en tant que premier paramètre (ou les éléments du DOM qui correspondent au sélecteur) et les positionnera par rapport à le premier élément de la NodeList
. Ensuite, il renvoie les éléments adoptés en tant que nouvelle NodeList
. Donc, dans notre exemple de page, cela remplacera tous les enfants du premier
dojo.query ("li"). adopter ("p", "seulement");
Donc, il y a ça.
Puisque NodeList
s sont similaires aux tableaux, vous pouvez utiliser juste un régulière pour
boucle pour itérer sur eux. toutefois, NodeList
s ont un pour chaque
méthode:
dojo.query ("li"). forEach (function (element, index, arr) // fais ton truc);
Comme vous pouvez le constater, la fonction de rappel prend trois paramètres: l'élément, l'index et le tableau lui-même. Si vous voulez faire une boucle sur d’autres tableaux, vous pouvez utiliser dojo.forEach
De la même manière, il suffit de passer ce tableau en tant que premier paramètre:
dojo.forEach ([1,2,3], function (item) // act here);
pour chaque
renvoie le NodeList
ou tableau avec lequel vous avez commencé. Si vous voulez renvoyer un tableau modifié, vous pouvez utiliser le carte
méthode. Tout ce que vous retournez de la fonction de rappel sera dans le tableau (ou NodeList
) retourné à la fin.
dojo.map ([1,2,3], function (item) return item * item;); // [1, 4, 9]
Un peu lié à cela est le filtrage des nœuds sur un NodeList
, avec filtre
.Vous pouvez simplement passer cette méthode à un sélecteur CSS, et seuls les éléments correspondants seront conservés..
dojo.query ("li"). filter (". surbrillance"); // liste de noeuds avec un
toutefois, filtre
peut également prendre une fonction de rappel qui reçoit trois paramètres: l’élément actuel, son index et le tableau. Si la fonction retourne vrai
, l'élément est conservé; sinon, c'est omis. Un nouveau NodeList
des éléments conservés est renvoyé.
dojo.query ("li"). filter (fonction (el) retourne dojo.query ("a", el) [0] .innerHTML === "À propos de";); // retourne une liste de noeuds contenant uniquement l'élément de liste avec le texte "À propos de"
Facilement, il y a aussi un dojo.filter
version qui prend un tableau comme premier paramètre et le rappel comme seconde.
dojo.filter (["Nettuts", "Psdtuts", "Phototuts"], fonction (el, idx, arr) return el.slice (0,1) === "P"); // ["Psdtuts", "Phototuts"]
Parlons maintenant des événements avec Dojo. Et nous allons commencer par les événements DOM, car c'est généralement ce que vous utilisez. disons que nous voulons faire quelque chose lorsque notre est cliqué. Il y a plusieurs façons de le faire, et nous en discuterons tous ici.
Premièrement, supposons que nous traitons un événement qui se produit sur un élément ou des éléments que nous avons récupérés avec dojo.query
. Nous pourrions utiliser le sur clic
méthode qui NodeList
s ont:
dojo.query ("h1"). onclick (function () alert ("Learning Dojo"););
Cependant, il ne s'agit en réalité que d'une méthode dite du «sucre syntaxique». En coulisse, Dojo utilise le relier
Méthode NodeList:
dojo.query ("h1"). connect ("onclick", fonction (e) alert ("apprentissage du Dojo"););
Cette méthode passe le travail à une autre méthode, dojo.connect
; vous utiliserez probablement cette méthode directement lorsque vous aurez un seul nœud DOM sur lequel vous souhaitez gérer un événement:
var h = dojo.query ("h1") [0]; // ou dojo.byId ("some_element"), par exemple dojo.connect (h, "onclick", function () alert ("learning Dojo"););
Remarquez comment, chaque fois que nous «gravissons une couche», nous ajoutons un autre paramètre au début de l'appel de la méthode..
Parlons brièvement des événements de déconnexion. Lorsque vous utilisez les méthodes fournies sur un NodeList
Par exemple, il n’existe actuellement aucun moyen facile de déconnecter les événements. Ceci est dû au fait dojo.connect
renvoie un descripteur utilisé lors de la déconnexion d'événements. Pour déconnecter un événement, passez son handle à dojo.disconnect
:
var h = dojo.query ("h1") [0], handle = dojo.connect (h, "onclick", function () alert ("apprentissage du Dojo"); dojo.disconnect (handle););
Si vous mettez cela dans votre console, puis cliquez sur le bouton , vous recevrez une alerte. Ensuite, le gestionnaire sera déconnecté, les clics ultérieurs ne feront rien..
Si vous voulez créer vos propres événements (ou, en utilisant la terminologie de Dojo, vos propres sujets), vous pouvez utiliser celui de Dojo. publier
et souscrire
méthodes. Si vous connaissez le fonctionnement d'autres systèmes de publication / sous-systèmes, vous n'aurez aucun problème avec cela..
Pour souscrire un sujet, il suffit de passer le nom du sujet et la fonction à exécuter lors de la publication du sujet:
dojo.subscribe ("myTopic", fonction (data, moreData) alert (data); console.log (moreData););
Ensuite, vous pouvez publier le sujet presque aussi facilement:
dojo.publish ("myTopic", ["certaines données", "quelques données supplémentaires"]);
Notez que toutes les données que vous souhaitez transmettre aux fonctions qui s'abonnent à votre sujet sont placées dans un tableau et transmises en tant que second paramètre..
Dans ce tutoriel, nous avons probablement couvert 90% des fonctionnalités DOM intégrées au fichier Dojo Base que nous obtenons du CDN de Google. Cependant, il y a plus de fonctionnalités à discuter. Avant d’y arriver, cependant, nous devrons apprendre à intégrer les fonctionnalités supplémentaires de Dojo. Nous en discuterons et bien plus dans le prochain épisode de cette série.
Vous avez des demandes concernant ce que vous aimeriez apprendre à faire dans le Dojo? Je lis toujours les commentaires pour que vous sachiez quoi faire!