Estructurar JavaScript con Dojo

Estructurar JavaScript con Dojo: introducción

Dojo es un marco de JavaScript (conjunto de componentes de software) que vive a la sombra de los famosos JQuery, pero eso tiene su parte de cosas buenas. Además de ser fácil de instalar y muy ligero, puede organizar su Javascript, por supuesto, en clases compuestas de atributos y métodos. Por lo tanto, puede usar los conceptos de herencia e inclusiones de clase, uno dentro del otro.

Pero eso no es todo: con Dojo viene otro marco: « Dijit «. Contiene, entre otras cosas, muchas herramientas gráficas completamente codificadas como calendarios, ventanas que desaparecen gradualmente o incluso» visualizadores «, lo que facilita la organización de su sitio web en pestañas (por ejemplo). Un visualizador es un objeto gráfico.

En resumen, el Dojo es poderoso y es difícil detallar todas sus posibilidades de uso. A continuación se detallan los principios básicos para que pueda instalarlo en su sitio web y poder organizar su código en clases.

Porque, además de los sitios completamente JavaScript que pueden existir, ¡también es genial!

Cómo instalar Dojo en su Pc

La instalación del Dojo se realiza en tres pasos muy comunes: descarga, instalación en el sitio y carga durante la apertura del sitio.

Descargar Dojo

La mejor manera de descargar Dojo es ir directamente al sitio web oficial del marco, es decir, aquí: http://dojotoolkit.org/download/ y descargue la última versión estable.

Instalación Dojo

Una vez descargado, verá tres carpetas: «dojo», «dijit» y «Dojox» (este último es en realidad una extensión del marco básico). Nada más fácil de instalar: copie estas tres carpetas en la raíz de su sitio (o una subcarpeta si lo prefiere, por supuesto).

Cargando al inicio del sitio

Último paso más importante: solicite al navegador del usuario que descargue el marco al cargar el sitio. Para hacer esto, use una técnica similar a la carga de una fuente CSS: coloque una etiqueta de fuente en la «cabeza».

En esta línea, «dojo.js» es la página principal de Javascript del marco. Recuerde cambiar la ruta de la carpeta dojo de acuerdo con su posición en el árbol del sitio

Voila! Dojo está listo para trabajar en su sitio!

Cómo usar Dojo

Bueno, está bien, pero ¿para qué sirve tener un Dojo cargado? ¿Qué vas a hacer con esto ahora?

El método addOnLoad

El método principal del Dojo es el dojo.addOnLoad (). Este método se llama para cargar el sitio web. También hay un método dojo.addOnUnload () llamado, a su vez, para cerrar el sitio. Específicamente, solo necesita poner un script JS en la página de inicio de su sitio web llamando a este método.

La clase «Aplicación»

Pero, por supuesto, no pondrá todo su código fuente JS aquí, ¡esto no tendría sentido cuando se trata del método «no dojo»! Entonces, aquí hay un truco que uso: la clase «Aplicación». Específicamente, esta clase es responsable de cargar todas las demás clases en el sitio y tiene, como atributo, la configuración predeterminada de su sitio, si corresponde (ejemplo para un blog: la cantidad de elementos por página base, el estilo predeterminado , etc …).

Crear una clase Javascript

Veremos aquí la creación de una clase Javascript a través del Dojo ilustrado por la creación de nuestra clase «Aplicación». Comience creando un archivo «Application.js». Para ilustrar, supongamos que esta clase estaba en la raíz del sitio, en la carpeta «mysite», luego en la subcarpeta «javascript», es decir: / mysite / javascript /.

Veamos la creación de la clase JS con este ejemplo:

dojo.provide('meusite.javascript.Application');     
dojo.declare('meusite.javascript.Application', null, {     
   meuPrimeiroArgumento: null,     
   meuSegundoArgumento: null,     
   constructor: function(param1, param2) {     
      meuPrimeiroArgumento = param1;     
      // Códifo do fabricante da classe.     
   },     
   método1: function(param){     
   },     
   método2: function(){     
   }     
});     

Podemos observar varias cosas:

• Llamada a la función dojo.provide como parámetro la ruta de la carpeta de la clase. Esto permitirá que el Dojo «sepa» que esta clase de Aplicación existe.
• Llamada a la función dojo.declare que contiene todo el código para la clase de aplicación. Este método toma tres parámetros:
  • El camino de la clase
  • Un significado booleano, «ignorar errores al cargar», lo que sugiero que deje «verdadero» porque a menudo hay errores y un error puede bloquear completamente la carga del Javascript de su sitio web.
  • Los contenidos de la clase en cuestión, en orden:
    • Primero, encontramos los atributos de clase, inicializados con «nulo» y seguidos de comas (incluido el último).
    • Luego, un primer método: el fabricante, que puede incluir o no los parámetros. Tampoco puede hacer nada, si quieres.
    • Los otros métodos de la clase (opcional, por supuesto).
  • Finalmente, los corchetes y paréntesis de cierre del método «declarar».

Cada atributo y método es seguido por una coma para separarlo de los demás, excepto el último (como se muestra arriba).

• Contenido de la clase de aplicación:

Vea el contenido occidental que propongo, para ilustrar lo que hemos visto hasta ahora.

dojo.provide('meusite.javascript.Application');     
dojo.declare('meusite.javascript.Application', null, {     
   _usuário: null,     
      
   constructor: function(userParam) {     
      this._usuário = userParam;     
   },     
   start: function() {     
      alert(this._usuário);     
   }     
});     

Concretamente, aquí crearemos la clase Aplicación con una cadena de caracteres como parámetro. Pase este parámetro como un atributo y luego llame al método «start ()» que muestra esta cadena.

Llamada de clase

Volvamos a nuestro dojo.addOnLoad. Aquí crearemos una instancia de nuestra clase de Aplicación y mostraremos la cadena de caracteres deseada.

Vea, entonces, tenemos los siguientes pasos:

• Llamada al método dojo.require () cuyo objetivo es decir «Necesito la próxima clase». Atención, la clase en cuestión debe declararse con dojo.provide, de lo contrario no funcionará.
• Cree una instancia de la clase Aplicación con la ayuda del fabricante que vimos en el párrafo anterior y, por lo tanto, con una cadena como parámetro.
• Llamando al método start () de la clase Application, que es responsable de mostrar la cadena anterior.

Resumen

Listo Ya sabes lo que se necesita para crear un sitio web completamente en JavaScript. Específicamente, sucede así:

• dojo.addOnLoad llama a su clase de aplicación.
• Su clase de aplicación contiene todos dojo.require del sitio! Luego llama a los fabricantes necesarios (visualizadores, controladores, etc.)