Descripción detallada del uso de RequireJs

I. Por qué usar RequireJS?

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

Cuando se cargan varios archivos js mencionados anteriormente, el navegador detendrá la renderización de la página (JS bloquea la renderización del navegadorCuanto más archivos se carguen, más tiempo perderá la página la respuesta; además, es difícil gestionar las relaciones de dependencia entre los archivos.

El papel de RequireJs:

Éste1Implementa la carga asincrónica de archivos js, evitando que la página pierda la respuesta;

Éste2Gestiona la dependencia entre módulos, facilitando la escritura y el mantenimiento del código.

Éste3Se definió un ámbito para evitar la contaminación del espacio de nombres global.

Dos, carga de require.js

1.DesdeSitio web oficialDescargue la última versión de require y colóquela en el directorio js, use script para incluir la página:

<script src="js/require.js">

Para no bloquear la renderización de la página, se puede colocarlo en la parte inferior del HTML o modificarlo de la siguiente manera:

<script src="js/require.js" defer async="true" ></script>

La propiedad async indica que este archivo debe ser cargado de manera asincrónica (la propiedad defer es compatible con IE).

2.Carga el código lógico de la página:

Suponiendo que el archivo de código sea main.js y esté ubicado en el directorio js, se pueden usar los siguientes métodos para incluirlo:

Método1:

<script　 data-main="js/main" src="js/require.js">

datos-La propiedad main especifica la entrada principal del programa de la página web, este archivo se cargará primero por requirejs. Dado que requirejs depende por defecto de recursos js, se puede abreviar main.js como main.

Método2:

Después de cargar require.js, cargar el archivo de configuración config (si existe) mediante requirejs, y luego cargar el módulo principal:

require([‘configUrl’],function () { //config.js debe ser cargado por requirejs para registrarse
 require([moduleAName],function(moduelA){
 //Código lógico
 )
});

Tres, la escritura del módulo principal

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// Algunos códigos aquí
　　});

La función require() acepta dos parámetros, el primer parámetro es un array, que representa los módulos dependientes del módulo actual; el segundo parámetro es una función de retroalimentación, que se llamará cuando todos los módulos especificados hayan cargado con éxito. Los módulos cargados se pasarán como parámetros a la función de retroalimentación, por lo que se pueden usar estos módulos (los valores de retorno de los módulos dependientes) dentro de la función de retroalimentación.

require() carga de manera asincrónica el módulo moduleA, moduleB y moduleC, el navegador no perderá la respuesta; la función de retroalimentación especificada, solo se ejecutará después de que todos los módulos dependientes hayan descargado y ejecutado la retroalimentación correspondiente.

Cuatro, configuración de módulos

El método require.config() puede definir las rutas de los módulos y definir las dependencias en forma de nombres cortos de módulos. Este métodoSe puede escribir en el frente de cada módulo principal (main.js), utilizado junto con el módulo principal.

Un parámetro es un objeto, que especifica las rutas de carga de los módulos de cada módulo mediante la propiedad paths. pathsSe pueden configurar múltiples rutas，si la biblioteca de CDN remota no se carga con éxito, se carga la biblioteca local.

Si no se define la configuración del módulo, las dependencias del módulo principal deben escribirse con la ruta completa.

Configura las rutas en demanda en cada página:

require.config({  //Configuración de registro de módulos, para el uso del código posterior
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery"/jquery-1.12.0.min"
  "fixheight": "login"/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

O bien, configure la configuración como un archivo js separado y luego

require([“configJsUrl”],function(){  //Es necesario cargar la configuración del módulo de manera asincrónica a través de require en el archivo main
 require([‘ModuleName’],function(Name){
 …other code
 )
)

Para evitar la necesidad de anidar require en cada página, también se puede usar el siguiente método:

Primero crea un archivo config.js separado:

require.config({ //Configuración de registro de módulos, para el uso del código posterior
 baseUrl: "/js/app/" //Otras dependencias son rutas relativas a esta ubicación
 // Configuración de rutas
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “Nombre corto del módulo” : “La dirección de la ruta relativa con respecto al baseUrl, sin la extensión del archivo de módulo .js”
 },
 // Las bibliotecas escritas en modo no AMD necesitan ser configuradas de nuevo
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（el nombre corto del módulo aún necesita definir la ruta）: {
  exports: 'Backbone',  　　　　//El nombre de la variable de salida de la biblioteca de clase, que indica el nombre con el que se llama este módulo desde el exterior
  deps:['jquery','underscore'] //Las dependencias de este módulo
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//Los parámetros de los recursos JS, que controlan la actualización de la caché de la versión
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main，则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径，则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档路径的脚本：

•　　　 以 ".js" 结束.

•　　　 以 "/" 开始.

•　　　 包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求，每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求，影响网页的加载速度。因此require.js提供了一个优化工具(r.js)，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数，但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块，必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义，通常返回一个对象，该对象具有供别的模块使用的方法或属性；或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件，允许require.js异步加载txt、css或html等文本资源供js使用，而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
); 

Atención:

Las dependencias del módulo pueden ser introducidas a través de [] o introducidas en la función de devolución de llamada a través del método require(), el efecto es el mismo. Porque el método define primero escaneará los dependencias del método require en la función de devolución de llamada mediante expresiones regulares y las descargará, luego ejecutará la función de devolución de llamada. Pero en este momento, es necesario pasar el dependencia require en sí mismo, de lo contrario se producirá un error:

define(function(require){
 var helper=require(‘helpModuleUrI');//también cargará esta dependencia anticipadamente
 ...
)

Cuando varios módulos dependen sucesivamente de un módulo mismo, ese módulo solo se descargará e inicializará una vez, y luego require mantendrá su referencia para que otros módulos puedan usarla nuevamente.

Diferencia entre la ejecución del método require y la ejecución de la devolución de llamada:

require('config',callBack1);
require('b',callBack2);
// Los dos métodos require se ejecutarán inmediatamente, pero el orden de ejecución de callBack es incierto, depende del orden de descarga.
//Diferente al siguiente código, se ejecutará estrictamente en orden
require('config',function(){
 require('b',callBack2)
)

Este es el contenido completo del artículo, esperamos que el contenido de este artículo pueda ayudar a todos en sus estudios o trabajo, y también esperamos que apoyen más a los tutoriales de grito!

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.