dojo
Hallo Dojo
Zoeken…
Invoering
Een eenvoudige Hello Dojo zoals Hello World in andere programmeertalen. Dojo is eenvoudig te installeren / configureren en gebruiken. U kunt de nieuwste versie van Dojo downloaden van http://dojotoolkit.org/download/ of u kunt de zogenaamde CDN's in uw project gebruiken. Ik verkies het te downloaden en te gebruiken. De nieuwste versie ten tijde van dit onderwerp is 1.12.1 en er wordt gewerkt aan Dojo 2.0.
Hallo Wereld
Maak een HTML-bestand zoals hieronder. In de script-tag kunt u de CDN-link gebruiken of van uw lokale locatie
<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>
Dat is het. Wanneer u deze HTML uitvoert, zou u Hallo moeten zien. Ja, in dit voorbeeld moeten we nog een Dojo-specifieke code gebruiken. Maar dit laat zien hoe u met Dojo een eenvoudige pagina kunt maken. Vervolgens zullen we zien hoe we Dojo op deze eenvoudige pagina kunnen toepassen.
Dojo AMD
Laten we in het volgende voorbeeld de Dojo-functies gebruiken en begrijpen wat AMD (Asynchronous Module Definition) betekent.
<!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>
Het verschil met het vorige voorbeeld is dat er een extra script-tag is en dat er weinig dojo-functies worden gebruikt. Laten we ze allemaal bekijken
vereisen In leken term is vereisen vergelijkbaar met het importeren of gebruiken van instructies in andere talen waarin u sommige OOTB-bibliotheken importeert (in dojo noem je ze modules). Bestaande modules worden geladen met het trefwoord 'vereisen' en nieuwe modules worden gemaakt met het trefwoord 'definiëren'. We zullen meer leren over modules in de latere sectie. Voor dit voorbeeld hebben we twee OOTB-modules 'dojo / dom' en 'dojo / dom-construct' gebruikt. dojo / dom (dom) is de kern-DOM (documentobjectmodel) die kan worden gebruikt om een knooppunt van HTML te krijgen. Voor javascript-ontwikkelaars is het vergelijkbaar met document.getElementById (''), intern gebruikt dojo dezelfde methode. dojo / dom-construct (domConstruct) wordt gebruikt om knooppunten zoals div, li, ul enz. te maken. Het is een DOM-constructie-API en het kan ook worden gebruikt om op elke positie een knooppunt in DOM in te voegen. Laten we zeggen dat je een div 'abc' hebt en een andere div 'xyz' wilt maken en deze achter 'abc' wilt plaatsen. Dat kun je zo bereiken
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Terugkomend op ons voorbeeld, hebben we
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
binnen de functie ziet u dom en domConstruct. Dit is hoe we verwijzen naar dojo / dom en dojo / dom-construct. U kunt de naamgevingsconventie gebruiken die u wilt
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Maar het is een goede gewoonte om betekenisvolle namen te hebben, zoals voor dojo / dom gebruik dom en voor dojo / dom-construct, gebruiker domConstruct.
Nu hebben we binnen de functie
var greetingNode = hi.byId('greeting');
Wat dit doet, is dat het de dom (div in dit geval) doorzoekt met id = 'greeting'. variabele groetNode, heeft de werkelijke domknoop. Dan hebben we,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Dus hier voegen we Dojo toe! naar het knooppunt groetNode. Dit is zoals Hallo + Dojo! en de output zal Hallo Dojo zijn!
Dus hiermee hebben we geleerd
- Hoe dojo-functies te gebruiken
- Hoe OOTB-modules te gebruiken
- Hoe dom te manipuleren