Este artículo es un resumen de algunos puntos de conocimiento de las necesidades, acompañado del análisis de ejemplo en aplicaciones de múltiples páginas.
La estructura del directorio de este caso es la siguiente:
Requerir JS API Tres funciones principales: Define (Crear módulo), requerir (Módulo de carga) y config (config)
1. Cargar el archivo JS en el archivo HTML
El contenido de Page1.html es el siguiente:
<! Doctype html> <html> <fead> <title> página 1 </title> <script data-mrain = "scripts/page1" src = "scripts/lib/request.js"> </script> </head> <body> <a href = "page2.html"> vaya a la página 2 </a> </body> </html>
El contenido de Page2.html es el siguiente:
<! Doctype html> <html> <fead> <title> página 2 </title> <script data-mrain = "scripts/page2" src = "scripts/lib/require.js"> </script> </bead> <body> <a href = "page1.html"> vaya a la página 1 </a> </body> </html>
Extensión de conocimiento:
El atributo de Main de datos especifica el módulo principal del programa web, y este archivo se carga primero por Requirjs. Dado que el nombre de sufijo de archivo predeterminado de requirirjs es JS, la página1.js se puede abreviar como página1
Reglas de prioridad de ruta raíz para cargar archivos de script
Al cargar un módulo con requerir (), el sufijo .js se omitirá y se buscará desde BaseURL; Si tiene sufijo .js, o comienza con "/", o contiene el protocolo URL (http/https), la raíz será
Buscar de acuerdo con la configuración de su ruta específica
config> data-main> basarurl predeterminado
Si no se establecen Data-Main y Config, el BaseUrl predeterminado es el directorio donde se encuentra la página HTML que referencias.
Establezca datos principales, entonces BaseUrl es el directorio donde se encuentra el módulo principal (por ejemplo, el módulo principal en el primer HTML es Page1.js, por lo que el directorio donde se encuentra/scripts es el directorio raíz)
Configure la configuración, establezca explícitamente BaseUrl y también establezca una ruta separada para cada módulo.
2. Configure las rutas de los módulos, etc.
Use el método requerir.config () para personalizar el comportamiento de carga del módulo. En una aplicación de varias páginas, la configuración se puede escribir en un archivo compartido, como el archivo Common.js en este ejemplo. Luego, después de que cada página carga la configuración actual, los módulos requeridos se cargan en la función de devolución de llamada.
El código Common.js es el siguiente:
request.config ({baseUrl: 'scripts/app', raths: {jQuery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min','../lib/jquery']}});Extensión de conocimiento:
Elementos de configuración compatibles:
BaseURL:
La ruta de la raíz de búsqueda para todos los módulos. Nota: Cuando el archivo JS cargado (termina con .js, comienza con "/", contiene un protocolo), no se utilizará BaseURL;
Caminos:
Mapas de ruta Nombres del módulo que no se colocan directamente debajo de BaseUrl. La posición inicial al configurar la ruta es relativa a BaseURL, a menos que la configuración de la ruta comience con "/" o contenga un protocolo de URL;
Nota: La ruta definida en las rutas no puede contener sufijos .js, porque el mecanismo de resolución de ruta agregará automáticamente sufijos .js; y la ruta de carga se puede configurar varias veces. Si la carga de CDN falla, el archivo JS local se cargará;
calce:
Configurar para módulos que no usan Define () para declarar dependencias;
Hay dos parámetros a los que deben prestarse atención:
(1) Valor de exportación (nombre de la variable de salida), Exponer la interfaz del método
(2) matriz DEPS, que indica la dependencia del módulo
como:
request.config ({baseUrl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {Deps: ['subscore', 'zepto'], exports: 'backbone'}, 'zepto.animate': ['zapto']});3. Carga del módulo
El código de la página1.js es el siguiente:
requerir (['./ Common'], function (común) {requerir (['sayPage1'], function (sayPage1) {sayPage1.hello ();});});El código Page2.JS es el siguiente:
requerir (['./ Common'], function (común) {requerir (['sayPage2'], function (sayPage2) {sayPage2.hello ();});});Expansión del conocimiento:
La función requerir () acepta dos parámetros. El primer parámetro es una matriz que representa el módulo al que depende; El segundo parámetro es una función de devolución de llamada, y se llamará solo después de que todos los módulos especificados actualmente se carguen con éxito. El módulo cargado se puede llamar como parámetro para la función de devolución de llamada.
Para garantizar que el módulo requerido se cargue solo después de completar la configuración, es principalmente para el análisis correcto de la ruta y lo requiere en la función de devolución de llamada.
4. Definición de módulos
Código en SaysPage1.js:
Define (['jQuery'], function ($) {function sayshi () {$ ('Body'). Append ('<h1> Hello Page1! </h1>');} return {Hello: Sayhi}});Extensión de conocimiento:
La función Definir también acepta dos parámetros. El primer parámetro es una matriz de módulos dependientes, y el segundo parámetro es una función de devolución de llamada.
Por supuesto, cuando finalmente se lanza, los archivos JS deben fusionarse y comprimirse. Puede usar R.JS, que es conveniente y rápido ~
Lo anterior es un análisis de ejemplo de la aplicación Multipage RequestJS que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!