dojo
Bonjour dojo
Recherche…
Introduction
Un simple Hello Dojo comme Hello World dans d'autres langages de programmation. Dojo est simple à installer / configurer et à utiliser. Vous pouvez télécharger la dernière version de Dojo à l' adresse http://dojotoolkit.org/download/ ou vous pouvez utiliser ce que l'on appelle les CDN dans votre projet. Je préfère le télécharger et l'utiliser. La dernière version au moment de cette rubrique est la 1.12.1 et le travail sur Dojo 2.0 est en cours.
Bonjour le monde
Créez un fichier HTML comme ci-dessous. Dans la balise de script, vous pouvez soit utiliser le lien CDN ou de votre
<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>
C'est tout. Lorsque vous exécutez ce code HTML, vous devriez voir Hello. Oui, nous n'avons pas encore utilisé de code spécifique Dojo dans cet exemple. Mais cela montre comment vous pouvez créer une page simple en utilisant Dojo. Nous verrons ensuite comment appliquer Dojo à cette page simple.
Dojo AMD
Dans l'exemple suivant, utilisons les fonctionnalités de Dojo et comprenons ce que signifie AMD (Asynchronous Module Definition).
<!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>
La différence avec l'exemple précédent est que, il y a une balise script supplémentaire et à l'intérieur de celle-ci, il y a peu de caractéristiques de dojo utilisées. Voyons chacun d'eux
require En termes simples, require est similaire à import ou à l'aide d'instructions dans d'autres langues où vous importez des bibliothèques OOTB (dans dojo, vous les appelez modules). Les modules existants sont chargés à l'aide du mot-clé "require" et de nouveaux modules sont créés à l'aide du mot-clé "define". Nous en apprendrons plus sur les modules dans la section suivante. Pour cet exemple, nous avons utilisé deux modules OOTB «dojo / dom» et «dojo / dom-construct». dojo / dom (dom) est le DOM principal (modèle d'objet de document) qui peut être utilisé pour obtenir un nœud à partir de HTML. Pour les développeurs JavaScript, il est similaire à document.getElementById ('') en fait, en interne, dojo utilise la même méthode. dojo / dom-construct (domConstruct) est utilisé pour créer des noeuds tels que div, li, ul, etc. Disons que vous avez une div 'abc' et que vous voulez créer une autre div 'xyz' et la placer après 'abc'. Vous pouvez accomplir cela comme
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Pour revenir à notre exemple, nous avons
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
dans la fonction, vous voyez dom et domConstruct. Voici comment nous nous référons à dojo / dom et dojo / dom-construct. Vous pouvez utiliser la convention de nommage souhaitée
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Mais c'est une bonne pratique que vous ayez des noms significatifs comme pour dojo / dom use dom et pour dojo / dom-construct, user domConstruct.
Maintenant, dans la fonction, nous avons
var greetingNode = hi.byId('greeting');
Qu'est-ce que cela fait est qu'il recherche le dom (div dans ce cas) avec id = "salutation". variable greetingNode, aura le nœud dom réel. Ensuite nous avons,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Donc, ici, nous ajoutons Dojo! au nœud greetingNode. C'est comme Hello + Dojo! et le résultat sera Hello Dojo!
Donc, avec cela, nous avons appris
- Comment utiliser les fonctionnalités du dojo
- Comment utiliser les modules OOTB
- Comment manipuler dom