dojo
Ciao Dojo
Ricerca…
introduzione
Un semplice Hello Dojo come Hello World in altri linguaggi di programmazione. Dojo è semplice da installare / configurare e utilizzare. Puoi scaricare l'ultima versione di Dojo da http://dojotoolkit.org/download/ oppure puoi utilizzare ciò che viene chiamato CDN nel tuo progetto. Preferisco scaricarlo e usarlo. L'ultima versione al momento di questo argomento è la 1.12.1 e il lavoro su Dojo 2.0 è in corso.
Ciao mondo
Crea un file HTML come di seguito. Nel tag script, puoi utilizzare il collegamento CDN o il tuo locale come
<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>
Questo è tutto. Quando esegui questo codice HTML, dovresti vedere Hello. Sì, dobbiamo ancora utilizzare qualsiasi codice specifico Dojo in questo esempio. Ma questo mostra come è possibile creare una semplice pagina usando Dojo. Successivamente, vedremo come possiamo applicare Dojo a questa semplice pagina.
Dojo AMD
Nel prossimo esempio, usiamo le funzionalità di Dojo e capiamo cosa significa 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 differenza rispetto all'esempio precedente è che, c'è un ulteriore tag script e, all'interno di questo, ci sono pochi prodotti dojo in uso. Vediamo ognuno di loro
richiede In parole povere, require è simile all'importazione o uso di istruzioni in altre lingue dove si importano alcune librerie OOTB (nel dojo si chiamano moduli). I moduli esistenti vengono caricati utilizzando la parola chiave 'require' e i nuovi moduli vengono creati utilizzando la parola chiave 'define'. Impareremo di più sui moduli nella sezione successiva. Per questo esempio, abbiamo utilizzato due moduli OOTB "dojo / dom" e "dojo / dom-construct". dojo / dom (dom) è il DOM principale (modello oggetto documento) che può essere utilizzato per ottenere un nodo da html. Per gli sviluppatori javascript, è simile a document.getElementById ('') di fatto, dojo interno utilizza lo stesso metodo. dojo / dom-construct (domConstruct) è usato per creare nodi come div, li, ul ecc. È API di costruzione DOM e può anche essere usato per inserire un nodo in DOM in qualsiasi posizione. Diciamo che hai un div 'abc' e vuoi creare un altro div 'xyz' e posizionarlo dopo 'abc'. Puoi farlo così
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Tornando al nostro esempio, abbiamo
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
all'interno della funzione, vedi dom e domConstruct. Questo è il modo in cui facciamo riferimento a dojo / dom e dojo / dom-construct. Puoi usare qualunque sia la convenzione di denominazione che desideri
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Ma è una buona pratica avere nomi significativi come dojo / dom use dom e dojo / dom-construct, user domConstruct.
Ora all'interno della funzione, abbiamo
var greetingNode = hi.byId('greeting');
Ciò che fa è cercare in a dom (div in questo caso) con id = 'greeting'. variabile greetingNode, avrà il nodo dom effettivo. Poi abbiamo,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Quindi qui, stiamo aggiungendo Dojo! al nodo greetingNode. Questo è come Hello + Dojo! e l'output sarà Hello Dojo!
Quindi con questo, abbiamo imparato
- Come usare le funzionalità del dojo
- Come usare i moduli OOTB
- Come manipolare dom