Desventajas de la carga normal de JS
La interfaz debe empezar a renderizarse después de cargar el js
Si hay dependencias entre js, deben cargarse en orden según dichas dependencias. Si las dependencias son complejas, es más complicado escribir y mantener el código
Así, require.js surgió en la voz de las amplias masas del pueblo.
El papel de require.js
Implementa la carga asíncrona de js para evitar la falta de respuesta de la página
Gestionar las dependencias entre módulos para facilitar la escritura y el mantenimiento de código
require.js carga
Primero, entra en la [web oficial] http://requirejs.org/ descarga la última versión
Deposita la require.js descargada o copiada en el directorio del proyecto
Carga require.js en la página deseada
Carga directa: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Carga asíncrona: <scrip{filter}t src="js/require.js" deferrar async="true" ></scrip{filter}t>
Nota: async significa que este archivo debe cargarse de forma asíncrona para evitar que la página web deje de responder. IE no soporta asincrónico, así que carga el atributo de diferencia;
Una vez cargado el require.js, el siguiente paso es cargar nuestro propio código. Supongamos que nuestro propio archivo de código está main.js, también colocado bajo el directorio js. Así que, simplemente escribe lo siguiente: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
La función del atributo data-main es especificar el módulo principal del programa web. En el ejemplo anterior, este archivo se cargará primero require.js la main.js bajo el directorio js. Como require.js sufijo predeterminado es js, puedes main.js abreviado a main.
Cómo escribir el módulo principal
El main.js de la sección anterior se denomina módulo principal. Es decir, el método de entrada para todo el módulo.
Cómo escribir main.js
Métodos escritos directamente en el main.js sin depender de ningún otro módulo
main.function()
El módulo principal depende de otros módulos, así que utiliza la función require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Algo de código aquí
});
La función require() acepta dos parámetros:
El primer parámetro es un array que representa los módulos de los que depender
El segundo parámetro es una función de callback que se llamará después de cargar todos los módulos especificados en el frontal. Los módulos añadidos se pasan en forma de parámetros, para que puedan usarse dentro de la función de callback.
Carga de módulos
Ejemplo: Si el módulo dependiente del módulo principal (main.js) es ['jquery', 'crypto-js', 'anything']
Carga por defecto
Si los archivos de estos tres módulos dependientes están jquery.js, crypto-js.js, anything.js y main.js en el mismo directorio, pueden cargarse automáticamente según la sección anterior
Carga de configuración require.config()
require.config() está escrito en la cabecera del módulo principal (main.js).
Cómo se escriben los módulos AMD
require.js cargado el módulo, usando la especificación de AMD. Es decir, el módulo debe redactarse conforme a las normativas de AMD.
Específicamente, los módulos deben definirse mediante una función definida específica. Si un módulo no depende de otros módulos, puede definirse directamente en la función define()
Supongamos que ahora existe un archivo math.js que define un módulo de matemáticas. Luego, math.js escribir:
Así es como se carga:
Si el módulo también depende de otros módulos, entonces el primer argumento de la función define() debe ser un array que indique las dependencias del módulo.
Cuando la función requir() carga el módulo anterior, cargará primero myLib.js archivo.
Carga módulos que no sean AMD
Hay muchos módulos en el mercado que no cumplen con la especificación de AMD, require.js pueden cargarse
Antes de que estos módulos puedan cargarse, deben configurarse para requir.config() para definir algunas de sus características
Por ejemplo, noamd.js y noamddeps.js ambos módulos no son AMD, y si quieres cargarlos, tienes que definir sus características:
require.js acepta un objeto de configuración que, además de la propiedad de caminos, también tiene una propiedad de cuña específicamente para configurar módulos no AMD.
Específicamente, cada módulo define:
- Valor de exportación (nombre de la variable de salida): indica el nombre del módulo cuando se llama externamente
- Matriz DEPS: indica las dependencias de este módulo
Por ejemplo, el plugin jQuery puede definirse así:
require.js plugin
require.js también ofrece una variedad de plugins que implementan algunas funciones especiales
El plugin domready permite que la función de callback se ejecute después de cargar la estructura del DOM de la página:
Plugins de texto e imagen, que permiten require.js cargar archivos de texto e imagen:
Plugins similares incluyen JSON y MDOWN para cargar archivos JSON y Markdown.
|
Publicado en 11/10/2017 9:31:50
|
|
|
