dojo
Hola dojo
Buscar..
Introducción
Un simple Hello Dojo como Hello World en otros lenguajes de programación. Dojo es fácil de instalar / configurar y usar. Puede descargar la última versión de Dojo desde http://dojotoolkit.org/download/ o puede usar lo que se denomina CDN en su proyecto. Prefiero descargarlo y usarlo. La versión más reciente en el momento de este tema es 1.12.1 y el trabajo en Dojo 2.0 está en progreso.
Hola Mundo
Crea un archivo HTML como abajo. En la etiqueta de script, puede usar el enlace CDN o desde su local como
<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>
Eso es. Cuando ejecutes este HTML, deberías ver Hello. Sí, todavía no hemos utilizado ningún código específico de Dojo en este ejemplo. Pero esto muestra cómo puedes crear una página simple usando Dojo. A continuación, veremos cómo podemos aplicar Dojo a esta simple página.
Dojo AMD
En el siguiente ejemplo, vamos a usar las características de Dojo y entender qué significa AMD (Definición de Módulo Asíncrono).
<!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 diferencia con el ejemplo anterior es que, hay una etiqueta de script adicional y dentro de eso, hay pocas características de dojo que se están utilizando. Veamos cada uno de ellos.
require En layman term, require es similar a importar o usar sentencias en otros idiomas donde importas algunas bibliotecas OOTB (en dojo las llamas módulos). Los módulos existentes se cargan con la palabra clave 'require' y los nuevos módulos se crean con la palabra clave 'define'. Aprenderemos más sobre los módulos en la sección posterior. Para este ejemplo, hemos utilizado dos módulos OOTB 'dojo / dom' y 'dojo / dom-construct'. dojo / dom (dom) es el DOM central (modelo de objeto de documento) que se puede usar para obtener un nodo de html. Para los desarrolladores de JavaScript, es similar a document.getElementById ('') de hecho, el dojo interno utiliza el mismo método. dojo / dom-construct (domConstruct) se usa para crear nodos como div, li, ul, etc. Es la API de construcción DOM y también se puede usar para insertar un nodo en DOM en cualquier posición. Digamos que tienes un div 'abc' y quieres crear otro div 'xyz' y colocarlo después de 'abc'. Puedes lograr eso como
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");
Volviendo a nuestro ejemplo, tenemos
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
Dentro de la función, ves dom y domConstruct. Así es como nos referimos a dojo / dom y dojo / dom-construct. Puede utilizar cualquier convención de nomenclatura que desee
require([
'dojo/dom',
'dojo/dom-construct'
], function (hi, bye) {
var greetingNode = hi.byId('greeting');
bye.place('<em> Dojo!</em>', greetingNode);
});
Pero es una buena práctica tener nombres significativos como para dojo / dom use dom y para dojo / dom-construct, usuario domConstruct.
Ahora dentro de la función, tenemos
var greetingNode = hi.byId('greeting');
Lo que esto hace es que busca el a dom (div en este caso) con id = 'saludo'. variable greetingNode, tendrá el nodo dom real. Entonces nosotros tenemos,
domConstruct.place('<em> Dojo!</em>', greetingNode);
Así que aquí, estamos agregando Dojo! al nodo greetingNode. Esto es como Hello + Dojo! y la salida será Hello Dojo!
Así que con esto, aprendimos
- Cómo usar las características del dojo.
- Cómo utilizar los módulos OOTB.
- Como manipular dom