Cómo integrar múltiples marcos de JavaScript utilizando las especificaciones de AMD

Muchos frameworks importantes han comenzado a utilizar la especificación AMD para la carga de módulos. Este artículo tomará la integración de Dojo y jQuery como ejemplo para presentar cómo utilizar las especificaciones de AMD para integrar múltiples marcos de JavaScript, mejorando así la eficiencia del desarrollo y reduciendo los costos de desarrollo.

AMD es la abreviatura de Definición de Módulo Asincrónico. AMD es una especificación API propuesta por CommonJS para la carga dinámica asíncrona de código JavaScript. AMD es favorecido por muchos marcos de JavaScript convencionales por sus operaciones simples y elegantes. Los marcos de código abierto de JavaScript convencionales han comenzado gradualmente a utilizar las especificaciones de AMD para implementar la carga dinámica de sus módulos de código. Con la creciente popularidad de AMD, resulta más fácil migrar marcos de JavaScript durante el desarrollo y resulta más fácil introducir múltiples marcos de JavaScript con diferentes ventajas y capacidades en su aplicación.

Cómo funciona AMD

La especificación API de AMD es muy concisa y consta de una función llamada define:

define([module-name?], [array- de-dependencias?], [módulo-fábrica-u-objeto]) objeto]);

Entre ellos:

nombre-módulo: identificador del módulo, se puede omitir.

array-of-dependencies: los módulos de los que depender se pueden omitir.

Módulo-fábrica-u-objeto: Una implementación concreta de un módulo o un objeto JavaScript.

El primer parámetro nombre-módulo se refiere al identificador del nombre del módulo. No tiene ninguna función real en la carga de AMD y es solo un identificador de nombre. Si se omite el primer argumento, el módulo se vuelve anónimo.

La mayor ventaja de los módulos anónimos es que reduce el acoplamiento entre el propio código y el módulo al que pertenece. Este tipo de módulo se adhiere al principio DRY (No repetir), lo que significa que el archivo del módulo se puede colocar en cualquier lugar sin modificar el contenido del archivo. Por ejemplo, para las clases Java familiares, el nombre de la clase y el nombre del paquete deben ajustarse a un formato determinado, el nombre del archivo y el nombre de la clase deben ser los mismos y el archivo debe colocarse en la ruta del paquete correspondiente. En el caso del dojo de carga de AMD, si el módulo es anónimo, el nombre de archivo del módulo es el identificador del módulo.

Ventajas de AMD

Ventajas de los módulos anónimos

La siguiente es una comparación entre el método de carga de módulos tradicional y el método AMD para ver qué ventajas tienen los módulos anónimos. :

p>

En versiones anteriores de dojo, se creaba una clase de perro que heredaba de la clase de animal. La estructura del archivo es la siguiente:

Figura 1

La clase base animal tiene la siguiente declaración:

Listado 1

dojo. provide(" animal"); // Módulo utilizado para inicializar archivos js en dojo

En casos que no sean AMD, el nombre del archivo y los parámetros proporcionados deben permanecer consistentes (es decir, en casos que no sean AMD). , provide debe permanecer consistente (es decir, la mitad derecha del punto decimal en el nombre del archivo y el identificador del módulo); de lo contrario, dojo.require no inicializará la llamada al módulo correctamente.

En este punto, Continúe introduciendo subclases como gato y tigre. Para distinguir la clase base de esta clase, movimos la clase base animal a una carpeta separada, como se muestra a continuación:

Figura 2

.

El problema surge una vez que animal.js se mueve al directorio animalBase y dojo.provide("animal") en el archivo debe cambiarse a dojo.provide("animalBase.animal") para convertirlo en un módulo dojo adecuado. .

Este ejemplo muestra que al cargar recursos dojo en modo que no es AMD, si necesita cambiar la ruta al archivo y reutilizar parte de la biblioteca base, debe cambiar el código en el archivo mismo, lo que Los cambios estructurales en el código causaron muchos problemas. Entonces, echemos un vistazo a la flexibilidad de usar módulos anónimos de AMD.

En modo AMD, defina un archivo llamado animal.js con la siguiente estructura:

Lista 2

define(function(){

p>

ejecutar:función(){

...

}

});

Usar AMD La especificación de carga animal.js aún se puede usar directamente después de mover la ubicación. Bajo el anonimato de AMD, el nombre del archivo es el identificador del módulo, por lo que si animal se mueve del directorio raíz al directorio animalBase, simplemente cambie require(["animal"]) en su subclase a require("animalBase/animal") sin modificar El propio animal.js, que implementa el principio DRY. AMD le permite desarrollar módulos ligeramente acoplados siguiendo las líneas correctas, lo que hace que las aplicaciones sean más fáciles de entender y mantener. Además, Dojo continúa perfeccionando los detalles para ayudar a diseñar mejores arquitecturas de aplicaciones.

Ventajas de rendimiento

En Dojo tradicional, la carga de dependencias se completa sincrónicamente a través de dojo.require, mientras que AMD proporciona un mecanismo de carga asincrónica para las dependencias. Es menos probable que el mecanismo cause bloqueo. en el navegador. ¿Por qué utilizo "no propenso a bloquear" en lugar de "no bloquear" para describir la carga de AMD? De hecho, la carga asincrónica de recursos del navegador también está limitada por el número predeterminado de conexiones del navegador. Con el desarrollo de los navegadores, las ventajas de rendimiento de AMD se destacarán aún más.

AMD en Dojo

Dojo es un potente kit de herramientas Javascript de código abierto de nivel empresarial. Introdujo por primera vez la carga de AMD en la versión 1.6 y en las versiones posteriores 1.7 y 1.8 se han realizado mejoras. Dojo para darle un nuevo aspecto a la arquitectura del dojo. Estos cambios aportan mayor flexibilidad y mejor rendimiento al dojo.

AMD en jQuery

Los ingenieros de front-end prefieren jQuery como un excelente marco liviano. Su tamaño comprimido es de solo aproximadamente 30 K y jQuery proporciona una API muy simple, adecuada para. Desarrollo front-end ligero y rápido. Con jQuery, ya no tienes que preocuparte por el largo código JavaScript y puedes lograr mucho con sólo unos pocos símbolos.

jQuery admite la carga de bibliotecas de AMD a partir de la versión 1.7. Los desarrolladores pueden cargar el código fuente de jQuery de forma asincrónica a través del método require.

Integración de Dojo y JQuery

Hoy en día, muchos proyectos grandes introducen diferentes marcos de JavaScript y cargar demasiados recursos puede reducir el rendimiento de la aplicación. El cargador AMD resuelve este problema cargando recursos bajo demanda. A continuación se utilizan Dojo y jQuery como ejemplos para ilustrar la capacidad de AMD para integrar diferentes marcos.

Primero, coloque jquery.js en el proyecto de muestra:

Figura 3

Luego agregue el siguiente código a la página index.html para presentar la biblioteca jQuery. :

Listado 3

require(["jquery"]) ;

De esta manera puedes usar dojo y jQuery al mismo tiempo en la página.

script>

require(["jquery"]);