Share
L'utilitaire JavaScript le plus puissant et le moins utilisé est le même: le Dojo Toolkit. Alors que presque chaque framework ou toolkit JavaScript promet de faire tout ce dont vous avez besoin, le toolkit Dojo est le cas le plus convaincant pour que cette affirmation soit vraie. Cet article couvrira la plupart des fonctionnalités les plus puissantes de la boîte à outils Dojo et expliquera pourquoi vous devriez utiliser la boîte à outils Dojo pour votre prochain projet..
Ne commencez pas votre prochain projet sans vérifier toutes les fonctionnalités que Dojo offre!
Au fur et à mesure que la taille de notre code JavaScript côté client augmente, et ce sera, la modularité sera la clé pour garder nos applications rapides, maintenables et performantes. L’utilisation d’un seul fichier de bibliothèque sans chargement asynchrone est révolue. Pendant des années, le code de la boîte à outils Dojo a été le brillant exemple de la modularité, en utilisant dojo.require (before builds) pour extraire dynamiquement uniquement les ressources requises par la page. La méthode par défaut de chargement des ressources JavaScript était synchrone, bien qu’il existe une option interdomaine qui soit asynchrone..
Depuis, Dojo est passé à un chargeur asynchrone, écrit par Rawld Gill, qui charge magistralement toutes les ressources de manière asynchrone, améliorant considérablement la vitesse. Pour charger quelques ressources JavaScript, vous pouvez coder quelque chose comme ce qui suit:
// La fonction require demande au chargeur d'essayer de charger les ressources dans le premier tableau. // Si les ressources ont déjà été chargées, leurs objets mis en cache seront utilisés. Require (// Un tableau de modules à charger ["dojo / on", "dojo / touch", "dijit / form / Button", "dojo / domReady!"], // Une fonction de rappel avec des objets de module chargés comme arguments // Doit être ajoutée dans le même ordre que la fonction chargée (on, touch, Button) // Faites quelque chose avec les composants que nous avons chargés!);
Pour déclarer un module, codez simplement le modèle suivant:
// Utiliser 'define' au lieu de 'require' parce que nous définissons un module define (// Encore une fois, un tableau de dépendances de module pour le module que nous aimerions construire ["dojo / aspect", "dojo / _base / declare "," dijit / layout / BorderContainer "] // Encore une fois, une fonction de rappel qui doit renvoyer une fonction d'objet (aspect, declare, BorderContainer) // Retourne un module (objet, fonction ou classe déclarée par Dojo) return declare ( "mynamespace.layout.CustomBorderContainer", [BorderContainer], // les méthodes et attributs personnalisés ici);)
Ce simple définir La méthode, utilisée par presque tous les chargeurs AMD, est incroyablement simple et structurée. très semblable à un bloc require, il est donc très facile à utiliser. Les éléments répertoriés dans le tableau de dépendance sont chargés avant l'exécution du rappel. Le rappel (en général) renvoie une fonction ou un objet représentant le module. Un modèle simple qui se charge rapidement, maintient la modularité et permet aux développeurs de charger uniquement ce dont ils ont besoin!
Le chargeur riche en fonctionnalités de Dojo fournit également des plugins, tels que domReady, permettant d'écouter l'état de préparation du DOM, et dispose d'une détection de fonctionnalités avec hasJS. Le chargeur est également suffisamment intelligent pour charger conditionnellement les modules en fonction de l'environnement ou de la configuration:
// Ce code est présenté dans le module dojo / Deferred, définir (["./has", "./_base/lang", "./errors/CancelError", "./promise/Promise", "./has!! config-deferredInstrumentation? ./ promise / instrumentation "], fonction (a, lang, CancelError, Promise, instrumentation) //…);
Dojo est non seulement modulaire, mais il vous fournit également un chargeur intégré.!
Accentsconagua
dojo / declare Bien que JavaScript ne fournisse pas un véritable système de classes, le Toolkit Dojo fournit un modèle d'héritage de type classe utilisant dojo / declare. Declare est utilisé dans tout le framework pour que les développeurs puissent:
Le système de classes de Dojo utilise l'héritage prototype, permettant ainsi aux prototypes d'être hérités. Ainsi, les classes d'enfants peuvent être aussi puissantes que les parents grâce au prototype partagé. En utilisant dojo / declare est incroyablement facile:
// Bien sûr, nous devons utiliser define pour créer le module define ([// Charger la dépendance dojo / declare "dojo / declare", // charge également les dépendances de la classe que nous avons l'intention de créer "dijit / form / Button", " dojo / on "," mynamespace / _MyButtonMixin "// Les mixins commencent par" _ "], fonction (declare, Button, on, _MyButtonMixin) // Renvoie un produit declare (), c.-à-d. une classe return declare (// Premier argument est le nom du widget, si vous en créez un // Doit être au format de syntaxe d'objet "mynamespace.CustomButton", // Le deuxième argument est un objet unique dont le prototype sera utilisé comme base pour la nouvelle classe // Un tableau peut également être utilisé pour plusieurs héritages [Button, _MyButtonMixin], // Enfin, un objet contenant de nouvelles propriétés et méthodes ou // différentes valeurs pour les propriétés et méthodes héritées myCustomProperty: true, valeur: "Hello!", myCustomMethod : function () // Faites des choses ici!, methodThatOverridesParent: function (val) this.myCustomMethod (val); // appel "this.inherited (arguments)" exécute la méthode du parent // de la même chose, en passant les mêmes paramètres retourn this.inherited (arguments); ); );
Bien que la classe ci-dessus n'ait pas pour objectif d'accomplir une tâche réelle (il s'agit simplement d'un exemple), elle illustre la réutilisation du code, via la chaîne d'héritage et les mixins. il montre également comment une classe enfant peut appeler la même méthode d'une classe parent pour réduire le code répété.
Un autre avantage à utiliser le système de classes de Dojo est que tout les propriétés et les méthodes sont personnalisables - aucun objet "options" ne limite le nombre de propriétés personnalisables sur les classes Dojo. Tout est facilement changé et étendu tout au long du processus de création de classe.
dojo / _base / declare dojo / _base / declare Les aspects sont l’un des éléments les plus puissants et essentiels du développement d’applications Web avancées… et le Dojo Toolkit les fournit depuis des années. Au lieu de déclencher des fonctionnalités après un événement utilisateur traditionnel, comme Cliquez sur, passer la souris, ou keyup, Les aspects vous permettent de déclencher la fonction B avant ou après son exécution. Essentiellement, vous pouvez connecter des fonctions à des fonctions - génial!
Déclencher une fonction après une autre fonction ressemble à ceci:
// after (target, methodName, advisingFunction, receiveArguments); aspect.after (myObject, "une méthode", fonction (arg1, arg2) // Exécute la fonctionnalité après le déclenchement de la fonction myObject.doSomething, true);
S'assurer que la fonction B se déclenche avant la fonction A est tout aussi facile!
aspect.before (myObject, "une méthode", fonction (arg1, arg2) // Cette fonction est déclenchée * avant * la méthode myObject.someMethod d'origine);
Les aspects sont extrêmement utiles lors de la création d'interfaces utilisateur avancées avec Dijit. L'écoute d'événements sur un widget ou une classe peut déclencher une modification sur d'autres widgets, permettant aux développeurs de créer un grand widget de contrôle parmi de nombreux petits:
var self = this; aspect.after (this.submitButton, "onClick", function () // Le bouton d'envoi a été cliqué, déclenche plus de fonctionnalités self.showAjaxSpinner (););
La ressource aspect a déjà été trouvée avec dojo.connect.
dojo / aspect Documentation et exemples dojo / aspect Je ne peux pas approuver suffisamment ce cadre d'interface utilisateur. Quand je dis que c'est sans précédent, je ne peux pas souligner à quel point je le pense vraiment. Il n'y a rien de proche.
Différé Représentations d'opérations asynchrones basées sur des objets, permettant de passer facilement d'états d'opérations asynchrones d'un endroit à un autre. Le différé est l’un des ajouts les plus récents et les plus importants de jQuery. Par coïncidence, le mantra de l'équipe de Dojo est "Dojo l'a fait". La boîte à outils Dojo présente les programmes différés depuis plusieurs années, et les utilise pour des opérations AJAX simples et avancées, des animations, etc..
En plus d’être à l’avant-garde des objets différés, Dojo a également mis au point plusieurs méthodes de traitement des E / S en dehors de XMLHTTPRequest standard, y compris une window.name emballage, dojo / io / iframe pour le téléchargement de fichiers AJAX, et plus encore. Alors, quand les objets différés sont-ils utilisés dans Dojo? Chaque fois qu'une action asynchrone / AJAX a lieu! Les différés sont renvoyés à partir de requêtes XHR, dojo / io demandes, animations et plus!
// Lance une requête AJAX, récupérant le différé en retour var def = xhr.get (url: "/ getSomePage"); // Fait beaucoup de callbacks def.then (function (result) result.prop = 'Quelque chose de plus'; return result;). Then (function (resultObjWithProp) //…). Then (function () //…);
Et puis qu'est-ce que dojo / io / iframeL'API de ressemble à?
require (["dojo / io / iframe"], fonction (ioIframe) // envoie la requête ioIframe.send (form: "myform", url: "handler.php", handleAs: "json" // Traite le success result). then (function (data) // Effectuer quelque chose // Traiter le cas d'erreur, function (err) // Traiter l'erreur). then (function () // Plus de rappels!) )
L’intérêt de Dojo pour utiliser Deferreds pour chaque opération AJAX est que, peu importe la méthode, vous savez toujours que vous recevrez un retour différé, ce qui accélère le développement et unifie l’API. Dojo 1.8 verra l'introduction de dojo / demande, une nouvelle consolidation des méthodes AJAX. Voici quelques exemples de la façon dont le dojo / demande API sera utilisé à l'avenir:
// Les requêtes AJAX les plus élémentaires exigent (["dojo / request"], function (request) request ("request.html"). Then (function (réponse) // faire quelque chose avec les résultats, function (err ) // gérer une condition d'erreur, function (evt) // gérer un événement de progression);); Une API unifiée rend le développement plus rapide et le code plus compact; le nouveau dojo / demande module de Bryan Forbes promet de rendre Dojo encore plus convivial pour les développeurs!
Il ne fait aucun doute que le plus grand avantage de la boîte à outils Dojo par rapport aux autres frameworks JavaScript est son framework Dijit UI. Cet ensemble inégalé de disposition, de formulaire et d’autres outils comprend:
Dijit permet également la création de widgets déclaratifs et programmatiques; La création d'un widget déclaratif se présente comme suit:
… Où la création de widgets JavaScript traditionnels ressemble à:
require (["dijit / form / Button"], fonction (Button) // Crée le bouton par programme var button = new Button (label: "Cliquez sur moi!," monNodeId "););
Plusieurs douzaines de widgets Dijit sont fournis dans l'espace de noms dijit, et quelques dizaines d'autres sont disponibles dans l'espace de noms dojox. Le framework d'interface utilisateur Dijit n'est pas juste quelques widgets d'interface utilisateur utiles, comme quelque chose comme jQueryUI; Dijit est une infrastructure d'interface utilisateur prête à l'emploi et testée par l'entreprise.
Au cours de mes deux années chez SitePen, j'ai travaillé presque exclusivement avec Dijit et les subtilités de la création de widgets flexibles, localisables et efficaces. Je ne peux pas approuver suffisamment ce cadre d'interface utilisateur. Quand je dis que c'est sans précédent, je ne peux pas souligner à quel point je le pense vraiment. Il n'y a rien de proche.
Comme avec presque tous les problèmes sur le Web, Dojo a une solution. dans ce cas, la réponse de Dojo à la vie mobile dans l'espace de noms dojox / mobile. L'excellente solution mobile de Dojo fournit:
Les widgets mobiles peuvent être créés de manière déclarative ou par programme, tout comme les widgets Dijit. Les vues mobiles peuvent être rendues paresseusement et la permutation entre les vues est transparente. L'anatomie HTML d'une page dojox / mobile est assez simple:
Votre nom d'application
En utilisant dojox / mobile / deviceTheme, nous pouvons détecter le périphérique utilisateur et appliquer le thème approprié:
// Application de la base de thème de périphérique à la détection de l'agent utilisateur require (["dojox / mobile / deviceTheme"]);
Avec le thème de périphérique en place, l'étape suivante nécessite l'utilisation des widgets utilisés par notre application mobile spécifique, ainsi que de toute autre classe personnalisée souhaitée:
// Tirez quelques widgets requis (["dojox / mobile / ScrollableView", "dojox / mobile / Heading", "dojox / mobile / RoundRectList", "dojox / mobile / TabBar", "dojox / parser"]);
Une fois que les ressources JavaScript ont été utilisées, il est temps d'ajouter de manière déclarative une série de vues et de widgets qui constituent l'application:
Tweets
- Article Tweet ici
Mentions
- Mentionnez l'article tweet ici
Réglages
Spectacle
- Élément de réglage ici
L'utilisation de dojox / mobile présente un avantage incroyable, à savoir que l'API pour la création de widgets est identique à celle de toutes les autres classes de Dijit. Par conséquent, la vitesse de développement est accélérée pour ceux qui utilisaient auparavant Dijit; pour ceux qui sont nouveaux dans Dojo, l'API mobile est toujours incroyablement facile.
Sans aucun doute, le plus grand avantage de la boîte à outils Dojo par rapport aux autres frameworks JavaScript est son framework d'interface utilisateur Dijit.
Les animations CSS constituent un excellent outil de visualisation, au même titre que les images animées, mais elles ne sont ni aussi souples et puissantes que la création et la manipulation de graphiques vectoriels. Raphael JS a toujours été l’outil de génération de graphiques vectoriels le plus populaire côté client, mais la bibliothèque GFX de Dojo est incontestablement plus puissante. GFX peut être configuré pour rendre les graphiques vectoriels au format SVG, VML, Silverlight, Canvas et WebGL. GFX fournit un wrapper utilisable pour créer chaque forme graphique vectorielle (ellipse, ligne, chemin, etc.) afin d'accélérer le développement et permet aux développeurs de:
Créer un ensemble simple de formes sur une toile peut ressembler à:
require (["dojox / gfx", "dojo / domReady"], fonction (gfx) gfx.renderer = "canvas"; // crée une surface GFX // arguments: noeud, largeur, hauteur surface = gfx.createSurface ( "surfaceElement", 400, 400) // Créez un cercle avec une couleur "bleue" définie surface.createCircle (cx: 50, cy: 50, rx: 50, r: 25). setFill ("bleu") ; // Crée un cercle avec une couleur hexagonale définie surface.createCircle (cx: 300, cy: 300, rx: 50, r: 25). SetFill ("# f00"); // Crée un cercle avec un linéaire gradient surface.createRect (x: 180, y: 40, largeur: 200, hauteur: 100). setFill (type: "linear", x1: 0, y1: 0, // x: 0 => 0, gradient cohérent horizontalement x2: 0, // y: 0 => 420, changement de dégradé verticalement y2: 420, couleurs: [offset: 0, color: "# 003b80"], offset: 0.5, color: "# 0072e5" , offset: 1, color: "# 4ea1fc"]); // Créez un cercle avec un dégradé radial surface.createEllipse (cx: 120, cy: 260, rx: 100, ry: 100). setFill (type: "radial", cx: 150, cy: 200, couleurs: [offset: 0, couleur: "# 4ea1fc", offset: 0.5, couleur: "# 0072e5", offset: 1, color: "# 003b80"]); ); 
Une API qui a été écrite sur GFX est la puissante bibliothèque Dojox / Charting de Dojo. La visualisation des données via des graphiques est populaire et pour une bonne raison; la simple lecture des chiffres ne donne pas, eh bien, l'image complète. La bibliothèque dojox / charting permet de:
Un graphique à secteurs de base peut être créé à l'aide du code JavaScript Dojo suivant:
Alors que le code ci-dessus crée un diagramme à secteurs simple, la bibliothèque de dojox / diagrammes de Dojo est capable de beaucoup, beaucoup plus.
SitePen, une société de conseil en JavaScript fondée par le fondateur de Dojo, Dylan Schiemann, a cherché à remplacer les widgets de grille encombrants et gonflés de DojoX par un widget de grille très rapide, extensible et modifiable; ils ont accompli cette tâche avec dgrid. Caractéristiques de la grille:
SitePen a effectué un travail remarquable en documentant chaque composant de dgrid. Il est donc extrêmement facile de créer vos propres grilles riches en fonctionnalités.!
Dojo est non seulement modulaire, mais il vous fournit également un chargeur intégré.!
Le test est aussi important, sinon plus important, côté client que côté serveur. Avec la gamme de navigateurs disponibles et le nombre variable de fonctionnalités fournies dans chaque version de navigateur, le test d'interactivité côté client est indispensable. Le cadre de test de la boîte à outils Dojo, surnommé DOH (Dojo Objective Harness), est fourni avec chaque téléchargement de version Dojo. L'écriture de test est incroyablement facile, et les tests peuvent être fournis dans différents formats:
// Déclarez le nom du module de test pour contenter le chargeur de modules de dojo. dojo.provide ("my.test.module"); // Enregistre une suite de tests doh.register ("MyTests", [// Les tests peuvent n'être qu'une simple fonction… function assertTrueTest () doh.assertTrue (true); doh.assertTrue (1); doh.assertTrue (! False );, //… ou un objet avec les propriétés name, setUp, tearDown et runTest 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 () , // …]); Le test ci-dessus est un exemple très simple de test Dojo, mais qu’en est-il d’une situation plus difficile, c’est-à-dire des actions asynchrones? L'action asynchrone la plus évidente est une requête AJAX, mais les animations et autres actions à puissance différée créeront une telle situation. DOH fournit une méthode extrêmement simple pour tester des actions asynchrones à l'aide d'objets doh.Deferred:
name: "Test de l'interaction différée", délai d'expiration: 5000, runTest: function () var différé = new doh.Deferred (); myWidget.doAjaxAction (). then (deferred.getTestCallback (function () doh.assertTrue (true);); retour différé;
Dans l'exemple de test ci-dessus, le getTestCallback la fonction ne tire pas jusqu'à doAjaxAction est terminé et renvoie le succès ou l'échec du test.
Les tests suivants n'évoluent pas jusqu'à ce que le doh.Deferred soit résolu ou expire, il n'y a donc pas de problème de synchronisation des tests ni de problèmes de chevauchement. DOH fournit une suite de tests incroyablement fiable que d'autres frameworks côté client ne fournissent tout simplement pas. DOH fournit également un robot DOH basé sur Java qui simule les actions réelles de la souris et du clavier pour des tests plus précis et plus réalistes. Si vous entendez Homer Simpson crier "Woohoo!", Tous vos tests réussissent; si vous entendez ce "DOH!" redouté, vos tests échouent et vous devez modifier votre code.
Lorsqu'une application Web est prête à être commercialisée, il est extrêmement important, dans l'intérêt du chargement et de la mise en cache optimisés, de créer un ou plusieurs fichiers JavaScript superposés. Cela réduit les demandes et maintient la charge du site aussi légère que possible. Mieux encore, les analyses du système de build de Dojo définir appels et les utilise pour détecter automatiquement les dépendances pour les générations. Pour utiliser le processus de génération Dojo, vous créez ce que l'on appelle un profil de construction. Les profils de construction peuvent contenir de nombreuses couches et peuvent devenir assez complexes, mais le profil ci-dessous est un exemple simple:
var profile = releaseDir: "/ chemin / vers / releaseDir", basePath: "…", action: "release", cssOptimize: "comments", mini: true, optimisé: "fermeture", layerOptimize: "fermeture", stripConsole : "all", selectorEngine: "acme", couches: "dojo / dojo": include: ["dojo / dojo", "app / main"], customBase: true, boot: true, resourceTags: amd: function (nomfichier, mid) return /\.js$/.test(filename); ;
Le processus de construction de Dojo est extrêmement personnalisable, permettant au développeur de personnaliser:
Les profils de construction sont exécutés via la ligne de commande (récemment réécrite pour NodeJS). La ligne de commande offre diverses options pour remplacer ou compléter les paramètres du profil de construction. Voici quelques exemples d’exécution du profil de construction:
./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js
Le processus de génération Dojo fournit une quantité incroyable de contrôle sur les fichiers de génération générés et complète le processus d'optimisation de l'application Web. Avec les fichiers CSS et JS réduits et superposés aux niveaux appropriés, votre application alimentée par Dojo est prête pour le salon.!
Deux très importantes bibliothèques DojoX ont déjà été mentionnées ci-dessus, DojoX Mobile et GFX, mais ce ne sont que deux des dizaines de trésors cachés fournis par Dojo. Ces trésors incluent:
Ce ne sont que quelques-unes des dizaines de joyaux de DojoX. Parcourez la caisse du Dojo pour en savoir plus sur les formidables outils de franges disponibles!
La boîte à outils Dojo est une boîte à outils JavaScript très complète qui fournit:
Ne commencez pas votre prochain projet sans vérifier toutes les fonctionnalités que Dojo a à vous offrir! Même si vous n'avez pas besoin de certaines des fonctionnalités avancées énumérées ci-dessus encore, utiliser les fonctionnalités les plus élémentaires de la boîte à outils Dojo (interrogation d'éléments, animations, requêtes XHR) vous aidera à créer une application Web rapide et riche en fonctionnalités, sans plafond.!
