Share
La utilidad de JavaScript más poderosa y subutilizada es la misma: el kit de herramientas Dojo. Si bien casi todos los marcos de JavaScript o el kit de herramientas se comprometen a hacer todo lo que necesita, el kit de herramientas de Dojo hace que el argumento más convincente sea cierto. Esta publicación cubrirá muchas de las características más poderosas de Dojo Toolkit, y al hacerlo, explicará por qué debería usar Dojo Toolkit para su próximo proyecto..
No comience su próximo proyecto sin revisar todas las características que Dojo tiene para ofrecer.!
A medida que nuestro código de JavaScript del lado del cliente crece en tamaño, y lo hará, La modularidad será clave para mantener nuestras aplicaciones rápidas, fáciles de mantener y de alto rendimiento. Los días de usar un solo archivo de biblioteca sin carga asíncrona han terminado. Durante años, el código de Dojo Toolkit ha sido el brillante ejemplo de modularidad, utilizando dojo.require (antes de las compilaciones) para extraer dinámicamente solo los recursos requeridos por la página. El método predeterminado para cargar recursos de JavaScript era sincrónico, aunque había una opción de dominio cruzado que era asíncrona.
Desde entonces, Dojo se ha movido a un cargador asíncrono, escrito por Rawld Gill, que carga magistralmente todos los recursos de forma asíncrona, lo que mejora enormemente la velocidad. Para cargar algunos recursos de JavaScript, puede codificar algo como lo siguiente:
// La función require indica al cargador que intente cargar recursos en la primera matriz // Si los recursos ya se han cargado, sus objetos en caché se usarán requieren (// Una matriz de módulos para cargar ["dojo / on", "dojo / touch", "dijit / form / Button", "dojo / domReady!"], // Una función de devolución de llamada con objetos de módulo cargados como argumentos // Debe agregarse en el mismo orden en que se cargaron la función (activado, toque, botón) // ¡Ahora haga algo con los componentes que hemos cargado!);
Para declarar un módulo, simplemente codifique el siguiente patrón:
// Usar 'define' en lugar de 'require' porque estamos definiendo un módulo define (// De nuevo, una matriz de dependencias de módulos para el módulo que nos gustaría construir ["dojo / aspect", "dojo / _base / declare "," dijit / layout / BorderContainer "] // De nuevo, una función de devolución de llamada que debe devolver una función de objeto (aspecto, declarar, BorderContainer) // Devolver un módulo (objeto, función o clase declarada Dojo) devolver declarar ( "mynamespace.layout.CustomBorderContainer", [BorderContainer], // Atributos y métodos personalizados aquí);)
Esta simple definir El método, utilizado por casi todos los cargadores AMD, es increíblemente simple y estructurado. muy parecido a un bloque requerido, por lo que es muy fácil de usar. Los elementos enumerados en la matriz de dependencias se cargan antes de que se ejecute la devolución de llamada. La devolución de llamada (normalmente) devuelve una función u objeto que representa el módulo. Un patrón fácil que se carga rápidamente, mantiene la modularidad y permite a los desarrolladores cargar solo lo que necesitan!
El cargador rico en características de Dojo también proporciona complementos, como domReady, para escuchar la preparación de DOM, y tiene detección de características con hasJS. El cargador también es lo suficientemente inteligente como para cargar módulos de forma condicional según el entorno o la configuración:
// Este código se incluye en el dojo / Módulo diferido define (["./has", "./_base/lang", "./errors/CancelError", "./promise/Promise", "./has! config-deferredInstrumentation? ./ promise / instrumentation "], function (has, lang, CancelError, Promise, instrumentation) //…);
Dojo no solo es modular como puede ser, sino que también proporciona un cargador integrado.!
Accentsconagua
dojo / declarar Mientras que JavaScript no proporciona un verdadero sistema de clases, el Dojo Toolkit proporciona un patrón de herencia similar a una clase usando dojo / declarar. Declare se utiliza en todo el marco para que los desarrolladores puedan:
El sistema de clases de Dojo utiliza la herencia prototípica, lo que permite que se hereden los prototipos y, por lo tanto, las clases de niños pueden ser tan poderosas como los padres debido al prototipo compartido. Utilizando dojo / declarar es increíblemente fácil:
// Por supuesto, necesitamos usar define para crear el módulo define ([// Cargar dojo / declarar dependencia "dojo / declarar", // También cargar dependencias de la clase que intentamos crear "dijit / form / Button", " dojo / on "," mynamespace / _MyButtonMixin "// Mixins comience con" _ "], función (declarar, Botón, encendido, _MyButtonMixin) // Devolver un producto declare (), es decir, un retorno de clase declarar (// Primer argumento es el nombre del widget, si está creando uno // Debe estar en formato de sintaxis de objeto "mynamespace.CustomButton", // El segundo argumento es un objeto único cuyo prototipo se usará como base para la nueva clase // Una matriz también se puede usar, para herencia múltiple [Button, _MyButtonMixin], // Por último, un objeto que contiene nuevas propiedades y métodos, o // valores diferentes para propiedades y métodos heredados myCustomProperty: true, value: "Hello!", myCustomMethod : function () // Do stuff here!, methodThatOverridesParent: function (val) this.myCustomMethod (val); // Llamando a "this.inherited (argumentos)" ejecuta el método del padre // del mismo, pasando los mismos parámetros devuelve this.inherited (argumentos); ); );
Si bien la clase anterior no se propone realizar una tarea real (es simplemente un ejemplo), ilustra la reutilización del código, a través de la cadena de herencia y los mixins; también muestra cómo una clase secundaria puede llamar al mismo método de una clase primaria para reducir el código repetido.
Otra ventaja de usar el sistema de clases de Dojo es que todos las propiedades y los métodos son personalizables, no hay un objeto "opciones" que limite la cantidad de propiedades personalizables en las clases Dojo. Todo se puede cambiar y extender fácilmente durante el proceso de creación de la clase..
dojo / _base / declare dojo / _base / declare Los aspectos son una de las piezas más poderosas y esenciales del desarrollo avanzado de aplicaciones web ... y el kit de herramientas Dojo las ha proporcionado durante años. En lugar de activar la funcionalidad después de un evento de usuario tradicional, como hacer clic, ratón sobre, o tecla Arriba, Los aspectos le permiten activar la función B antes o después de que se ejecute la función A. Esencialmente, puedes conectar funciones a funciones - brillante!
La activación de una función después de otra se ve así:
// after (target, methodName, advisingFunction, receiveArguments); aspect.after (myObject, "someMethod", function (arg1, arg2) // Ejecutar funcionalidad después de que la función myObject.doSomething se active, true);
Asegurando que la función B se dispare. antes de la función A es igual de fácil!
aspect.before (myObject, "someMethod", function (arg1, arg2) // Esta función se dispara * antes * de que el myObject.someMethod original hace);
Los aspectos son extremadamente útiles al crear interfaces de usuario avanzadas con Dijit. La escucha de eventos en un widget o clase puede desencadenar un cambio en otros widgets, permitiendo a los desarrolladores crear un widget grande y de control desde muchos pequeños:
var self = esto; aspect.after (this.submitButton, "onClick", function () // Se hizo clic en el botón de envío, activa más la funcionalidad self.showAjaxSpinner (););
El recurso de aspecto fue encontrado previamente con dojo.connect.
dojo / aspecto Documentación y ejemplos. dojo / aspecto No puedo aprobar este marco de interfaz de usuario lo suficiente. Cuando digo que no tiene paralelo, no puedo enfatizar lo mucho que lo digo. No hay nada cerca.
Diferidos son representaciones basadas en objetos de operaciones asíncronas, lo que permite que los estados de operación asíncrona se pasen fácilmente de un lugar a otro. Una de las adiciones más recientes e importantes de jQuery fue Deferreds. Casualmente, el mantra del equipo de Dojo es "Dojo lo hizo". El kit de herramientas Dojo ha presentado diferidos durante varios años, usándolos para operaciones AJAX simples y avanzadas, animaciones y más.
Además de estar a la vanguardia de los objetos diferidos, Dojo también fue pionero en varios métodos de manejo de IO fuera del estándar XMLHTTPRequest, incluido un nombre de la ventana envoltura, dojo / io / iframe para subir archivos AJAX, y más. Entonces, ¿cuándo se usan los objetos diferidos dentro de Dojo? ¡Cada vez que tiene lugar una acción asíncrona / AJAX! Los diferidos se devuelven de las solicitudes XHR, dojo / io Peticiones, animaciones y más.!
// Dispara una solicitud AJAX, obteniendo el Aplazado a cambio var def = xhr.get (url: "/ getSomePage"); // Realice muchos o 'callbacks def.then (function (result) result.prop =' Something more '; devuelva el resultado;). Then (function (resultObjWithProp) //…). Then (function () //…);
Y luego que hace dojo / io / iframeLa API parece?
require (["dojo / io / iframe"], function (ioIframe) // Envía la solicitud ioIframe.send (form: "myform", url: "handler.php", handleAs: "json" // Handle resultado exitoso). luego (función (datos) // Hacer algo // Manejar el caso de error, función (error) // Manejar error). luego (función () // ¡Más devoluciones de llamada!) );
La belleza de Dojo utilizando los aplazados para cada operación AJAX es que, sin importar el método, siempre sabe que recibirá un aplazado a cambio, lo que acelerará el desarrollo y unificará la API. Dojo 1.8 verá la introducción de dojo / solicitud, Una nueva consolidación de los métodos AJAX. Aquí hay algunos ejemplos de cómo dojo / solicitud API será utilizada en el futuro:
// Las solicitudes AJAX más básicas requieren (["dojo / request"], function (request) request ("request.html"). Luego (function (response) // haga algo con los resultados, function (err ) // manejar una condición de error, función (evt) // manejar un evento de progreso);); Una API unificada hace que el desarrollo sea más rápido y el código más compacto; el nuevo dojo / solicitud El módulo de Bryan Forbes promete hacer que Dojo sea aún más amigable para los desarrolladores!
Sin lugar a dudas, la mayor ventaja de Dojo Toolkit sobre otros marcos de JavaScript es su marco de interfaz de usuario Dijit. Este conjunto incomparable de diseño, forma y otras herramientas cuenta con:
Dijit también permite la creación de widgets declarativos y programáticos; La creación declarativa de widgets se ve así:
... por lo que la creación de un widget de JavaScript tradicional se ve así:
require (["dijit / form / Button"], function (Button) // Crear el botón mediante programación var button = new Button (label: 'Click Me!', "myNodeId"););
Hay varias docenas de widgets Dijit provistos dentro del espacio de nombres de dijit, y algunas docenas más están disponibles dentro del espacio de nombres dojox. El marco de la interfaz de usuario de Dijit no son solo algunos widgets útiles de IU, como algo así como jQueryUI; Dijit es un marco de IU preparado para la empresa y probado por la empresa..
En mis dos años en SitePen, trabajé casi exclusivamente con Dijit y las complejidades de crear widgets flexibles, localizables y eficientes. No puedo aprobar este marco de interfaz de usuario lo suficiente. Cuando digo que no tiene paralelo, no puedo enfatizar lo mucho que lo digo. No hay nada cerca.
Al igual que con casi todos los problemas en la web, Dojo tiene una solución; en este caso, la respuesta de Dojo a los dispositivos móviles está dentro del espacio de nombres dojox / mobile. La excelente solución móvil de Dojo proporciona:
Los widgets móviles se pueden crear de forma declarativa o programática, al igual que los widgets Dijit. Las vistas móviles se pueden representar de forma perezosa y el intercambio entre vistas es ininterrumpido. La anatomía HTML de una página dojox / móvil es bastante simple:
Nombre de su aplicación
Mediante el uso dojox / mobile / deviceTheme, Podemos detectar el dispositivo del usuario y aplicar el tema apropiado:
// Aplicará la base del tema del dispositivo a la detección de UA requerida (["dojox / mobile / deviceTheme"]);
Con el tema del dispositivo en su lugar, el siguiente paso es requerir los widgets utilizados por nuestra aplicación móvil específica, así como cualquier otra clase personalizada que deseamos:
// Arrastre algunos widgets (("dojox / mobile / ScrollableView", "dojox / mobile / Heading", "dojox / mobile / RoundRectList", "dojox / mobile / TabBar", "dojox / parser")); Una vez que se requieren los recursos de JavaScript, es hora de agregar de forma declarativa una serie de vistas y widgets que conforman la aplicación:
Tweets
- Tweet artículo aquí
Menciones
- Menciona el elemento de tweet aquí.
Ajustes
Show
- Elemento de ajuste aquí
Una ventaja increíble de usar dojox / mobile es que la API para la creación de widgets es la misma que todas las demás clases de Dijit, por lo que la velocidad en el desarrollo se incrementa para aquellos que han usado Dijit anteriormente; para aquellos que son nuevos en Dojo, la API móvil es increíblemente fácil.
Sin lugar a dudas, la mayor ventaja de Dojo Toolkit sobre otros marcos de JavaScript es su marco de interfaz de usuario Dijit.
Las animaciones CSS son una gran herramienta de visualización, al igual que las imágenes animadas, pero ninguna es tan flexible y poderosa como la creación y manipulación de gráficos vectoriales. La herramienta de generación de gráficos vectoriales del lado del cliente más popular siempre ha sido Raphael JS, pero la biblioteca GFX de Dojo es, sin duda, más potente. GFX se puede configurar para representar gráficos vectoriales en SVG, VML, Silverlight, Canvas y WebGL. GFX proporciona un envoltorio útil para crear cada forma de gráfico vectorial (elipse, línea, ruta, etc.) para acelerar el desarrollo, y permite a los desarrolladores:
Crear un conjunto simple de formas sobre un lienzo podría ser:
require (["dojox / gfx", "dojo / domReady"], function (gfx) gfx.renderer = "canvas"; // Cree una superficie GFX // Argumentos: nodo, ancho, altura surface = gfx.createSurface ( "surfaceElement", 400, 400); // Cree un círculo con un color "azul" surface surface.createCircle (cx: 50, cy: 50, rx: 50, r: 25). setFill ("blue") ; // Crate un círculo con un hexágono determinado surface.createCircle (cx: 300, cy: 300, rx: 50, r: 25). SetFill ("# f00"); // Cree un círculo con una línea gradient surface.createRect (x: 180, y: 40, ancho: 200, altura: 100). setFill (type: "linear", x1: 0, y1: 0, // x: 0 => 0, gradiente consistente horizontalmente x2: 0, // y: 0 => 420, cambiando gradiente verticalmente y2: 420, colores: [offset: 0, color: "# 003b80", offset: 0.5, color: "# 0072e5" , offset: 1, color: "# 4ea1fc"]); // Cree un círculo con una superficie de degradado radial.createEllipse (cx: 120, cy: 260, rx: 100, ry: 100). setFill (type: "radial", cx: 150, cy: 200, colors: [offset: 0, color: "# 4ea1fc", offset: 0.5, color: "# 0072e5", offset: 1, color: "# 003b80"]); ); 
Una API que se ha escrito sobre GFX es la potente biblioteca de gráficos / gráficos dojox de Dojo. La visualización de datos a través de gráficos es popular y por una buena razón; la simple lectura de números no proporciona, bueno, la imagen completa. La biblioteca dojox / charting permite:
Se puede crear un gráfico circular básico utilizando el siguiente código de JavaScript de Dojo:
Mientras que el código anterior crea un gráfico circular simple, la biblioteca dojox / charting de Dojo es capaz de mucho, mucho más.
SitePen, una consultora de JavaScript fundada por el fundador de Dojo, Dylan Schiemann, buscó reemplazar los widgets gruesos e hinchados de DojoX por un widget de cuadrícula muy rápido, extensible y editable; Han logrado esa tarea con dgrid. características dgrid:
SitePen ha realizado un excelente trabajo al documentar cada componente de dgrid, por lo que comenzar a crear sus propias grillas repletas de características será increíblemente fácil!
Dojo no solo es modular como puede ser, sino que también proporciona un cargador integrado.!
Las pruebas son tan importantes, si no más importantes, en el lado del cliente que en el lado del servidor. Con la variedad de navegadores disponibles y el número variable de funciones que se ofrecen en cada versión del navegador, las pruebas de interactividad del lado del cliente son una necesidad. El propio marco de prueba de Dojo Toolkit, apodado DOH (Dojo Objective Harness), se proporciona con cada descarga de la versión de Dojo. La escritura de prueba es increíblemente fácil, y las pruebas se pueden proporcionar en varios formatos diferentes:
// Declara el nombre del módulo de prueba para hacer feliz al cargador de módulos de dojo. dojo.provide ("my.test.module"); // Registre un conjunto de pruebas doh.register ("MyTests", [// Las pruebas pueden ser simplemente una función simple ... function assertTrueTest () doh.assertTrue (true); doh.assertTrue (1); doh.assertTrue (! False );, // ... o un objeto con las propiedades name, setUp, tearDown y runTest name: "thingerTest", setUp: function () this.thingerToTest = new Thinger (); this.thingerToTest.doStuffToInit (); , runTest: function () doh.assertEqual ("blah", this.thingerToTest.blahProp); doh.assertFalse (this.thingerToTest.falseProp); // ..., tearDown: function () , // …]); La prueba anterior es un ejemplo muy básico de una prueba Dojo, pero ¿qué pasa con una situación más difícil, es decir, acciones asíncronas? La acción asíncrona más obvia es una solicitud AJAX, pero las animaciones y otras acciones con poder Diferido crearán tal situación. DOH proporciona un método increíblemente fácil para probar acciones asíncronas usando doh. Objetos diferidos:
nombre: "Prueba de interacción diferida", tiempo de espera: 5000, runTest: function () var aplazado = nuevo doh.Deferred (); myWidget.doAjaxAction (). then (deferred.getTestCallback (function () doh.assertTrue (true);); return diferido;
En la prueba de muestra anterior, getTestCallback la función no se activa hasta doAjaxAction Está completo, y devuelve el éxito o fracaso de la prueba..
Las pruebas subsiguientes no avanzan hasta que el doh.Deferred resuelve o se agota el tiempo, por lo tanto, no hay problemas de tiempo de prueba o de superposición. DOH proporciona un conjunto de pruebas increíblemente confiable que otros marcos del lado del cliente simplemente no proporcionan. DOH también proporciona un robot DOH de Java que simula acciones reales del mouse y el teclado para realizar pruebas más precisas y realistas. Si escuchas que Homer Simpson grita "¡Woohoo!", Todas tus pruebas pasan; Si escuchas el temido "¡DOH!", tus pruebas fallaron y necesitas refactorizar tu código.
Cuando una aplicación web está lista para el lanzamiento, es increíblemente importante, en aras de la carga optimizada y la capacidad de almacenamiento en caché, para crear un archivo o archivos de JavaScript minificados y en capas. Esto reduce las solicitudes y mantiene la carga del sitio lo más ligera posible. Mejor aún es que el sistema de compilación de Dojo analiza. definir Llama y los usa para detectar automáticamente las dependencias para las compilaciones. Para usar el proceso de compilación de Dojo, crea lo que se conoce como un perfil de compilación. Los perfiles de compilación pueden contener numerosas capas y pueden ser bastante complejos, pero el siguiente perfil es un ejemplo simple:
var profile = releaseDir: "/ path / to / releaseDir", basePath: "…", action: "release", cssOptimize: "comments", mini: true, optimice: "closing", layerOptimize: "closing", stripConsole : "all", selectorEngine: "acme", layers: "dojo / dojo": include: ["dojo / dojo", "app / main"], customBase: true, boot: true, resourceTags: amd: function (filename, mid) return /\.js$/.test(filename); ;
El proceso de construcción de Dojo es extremadamente personalizable, lo que permite al desarrollador personalizar:
Los perfiles de compilación se ejecutan a través de la línea de comando (recientemente reescrita para NodeJS), y la línea de comando ofrece una variedad de opciones para anular o complementar la configuración dentro del perfil de construcción. Algunos ejemplos de ejecución del perfil de compilación incluyen:
./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js
El proceso de compilación Dojo proporciona una increíble cantidad de control sobre los archivos de compilación generados y completa el proceso de optimización de la aplicación web. Con el CSS y JS minimizados y en capas a los niveles apropiados, su aplicación potenciada por Dojo está lista para el showtime!
Dos bibliotecas DojoX muy prominentes ya se han mencionado anteriormente, DojoX Mobile y GFX, pero esas son solo dos de las docenas de tesoros ocultos que proporciona Dojo. Esos tesoros incluyen:
Estas son solo algunas de las docenas de gemas dentro de DojoX. Navega por la salida de Dojo para descubrir más de las increíbles herramientas de flecos disponibles!
El Dojo Toolkit es un conjunto de herramientas de JavaScript que abarca todo lo que proporciona:
¡No comience su próximo proyecto sin revisar todas las características que Dojo tiene para ofrecer! Incluso si no necesita algunas de las funciones avanzadas enumeradas anteriormente todavía, El uso de las funciones más básicas de Dojo Toolkit (consulta de elementos, animaciones, solicitudes de XHR) le ayudará a crear una aplicación web rápida y rica en funciones sin límite.!
