dojo
Hej Dojo
Sök…
Introduktion
En enkel Hello Dojo som Hello World på andra programmeringsspråk. Dojo är enkelt att installera / konfigurera och använda. Du kan ladda ner den senaste versionen av Dojo från http://dojotoolkit.org/download/ eller du kan använda det som kallas CDN: er i ditt projekt. Jag föredrar att ladda ner och använda den. Den senaste versionen vid tidpunkten för detta ämne är 1.12.1 och arbetet med Dojo 2.0 pågår.
Hej världen
Skapa en HTML-fil som nedan. I skripttaggen kan du antingen använda CDN-länk eller från din lokala liknande
<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>
Det är allt. När du kör denna HTML bör du se Hej. Ja, vi använder ännu inte någon Dojo-specifik kod i det här exemplet. Men detta visar hur du kan skapa en enkel sida med Dojo. Därefter kommer vi att se hur vi kan använda Dojo på denna enkla sida.
Dojo AMD
Låt oss i nästa exempel använda Dojo-funktioner och förstå vad AMD (Asynchronous Module Definition) betyder.
<!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>
Skillnaden från föregående exempel är att det finns en extra skripttagg och inom det finns det få dojo-featurer som används. Låt oss se var och en av dem
kräva På lekmän, term liknar import eller att använda uttalanden på andra språk där du importerar vissa OOTB-bibliotek (i dojo kallar du dem moduler). Befintliga moduler laddas med nyckelordet "kräva" och nya moduler skapas med nyckelordet "definiera". Vi kommer att lära dig mer om moduler i det senare avsnittet. I det här exemplet har vi använt två OOTB-moduler 'dojo / dom' och 'dojo / dom-construct'. dojo / dom (dom) är kärn-DOM (dokumentobjektmodell) som kan användas för att få en nod från html. För javascript-utvecklare liknar det document.getElementById ('') faktiskt, internt använder dojo samma metod. dojo / dom-construct (domConstruct) används för att skapa noder som div, li, ul etc. Det är DOM-konstruktions-API och det kan också användas för att infoga en nod i DOM vid valfri position. Låt oss säga att du har en div 'abc' och vill skapa en ny div 'xyz' och placera den efter 'abc'. Du kan åstadkomma det liknande
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Kommer vi tillbaka till vårt exempel
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
inom funktion ser du dom och domConstruct. Så här hänvisar vi till dojo / dom och dojo / dom-konstruktion. Du kan använda vilken namnkonvention du vill
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Men det är bra att du har meningsfulla namn som för dojo / dom-användning dom och för dojo / dom-konstruktion, användare domConstruct.
Nu inom funktionen har vi
var greetingNode = hi.byId('greeting');
Vad detta gör är att den söker i dom (div i detta fall) med id = 'hälsning'. variabel greetingNode, har den faktiska domnoden. Då har vi,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Så här lägger vi till Dojo! till noden greetingNode. Detta är som Hello + Dojo! och utgången blir Hello Dojo!
Så med detta lärde vi oss
- Hur man använder dojo-funktioner
- Hur man använder OOTB-moduler
- Hur man manipulerar dom