Creusez dans Dojo bases du DOM

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 que nous commencions

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

Préférer la formation visuelle?

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


Réunion Dojo

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:

  • Dojo CoreDojo Core est la fonctionnalité de base principale. La plupart d’entre elles sont du genre à obtenir avec jQuery. Cependant, il contient également des dizaines d'utilitaires de langage généralistes, ainsi que la plomberie des autres parties du Dojo..
  • Dijit: Dijit est la bibliothèque d'interface utilisateur de Dojo; c'est un sous-projet officiel, géré par des personnes distinctes. De cette façon, il est similaire à l'interface utilisateur jQuery. Une grande partie des fonctionnalités est similaire au genre de choses que vous trouverez dans la bibliothèque de widgets de l'interface utilisateur jQuery: sélecteurs de calendrier, zones de liste déroulante et boutons. Si vous souhaitez augmenter le volume de vos formulaires Web, vous trouverez presque tout ce dont vous avez besoin dans Dijit. Dijit contient également des outils de mise en page intéressants.
  • DojoX: DojoX (extensions Dojo) est un ensemble de projets individuels qui, vous l’avez deviné, étendent Dojo. Il n’est guère exagéré de dire que «il existe une extension Dojo pour cela». Des utilitaires de cartographie incroyables? Vérifier. Chaque type de magasin de données que vous voudriez jamais, et puis certains? Tu paries. Encore plus d’aides de forme pour renforcer celles disponibles à Dijit? C'est ici. Tout est là.

Obtenir 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

  • Accueil
  • Portefeuille
  • Abou
  • Contact

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


Trouver des éléments

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 NodeLists 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.


Création d'éléments

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:

  • "premier" ajoute le nouveau noeud au noeud de référence.
  • "avant" et "après" place le nouveau noeud avant ou après le noeud de référence.
  • "remplacer" remplace le noeud de référence par le nouveau noeud.
  • "seulement" remplace tous les éléments enfants du noeud de référence par le nouveau noeud.

Modification des nœuds

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");

Supprimer des nœuds

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.


    Déplacement / duplication de nœuds

    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

  • avec le paragraphe:

    dojo.query ("li"). adopter ("p", "seulement");

    Donc, il y a ça.


    Itération sur les nœuds

    Puisque NodeLists sont similaires aux tableaux, vous pouvez utiliser juste un régulière pour boucle pour itérer sur eux. toutefois, NodeLists 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"]

    Travailler avec des événements

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


    Conclusion

    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!