Spiegazione dettagliata dell'uso di RequireJs

Primo, perché utilizzare RequireJS?

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

Quando vengono caricati più file js, il browser interrompe la rendering della pagina (JS blocca la rendering del browser) Più file vengono caricati, più a lungo la pagina perde la risposta; inoltre, è difficile gestire le dipendenze tra i vari file.

L'azione di RequireJs:

(1) Implementa il caricamento asincrono dei file js, evitando che la pagina perda la risposta.

(2) Gestisce la dipendenza tra i moduli, rendendo la scrittura e la manutenzione del codice più facile.

(3) Definisce un contesto per evitare la contaminazione del namespace globale.

Secondo, il caricamento di require.js

1. DaSito ufficialeScarica l'ultima versione di require e mettila nella directory js, utilizzando script per includere la pagina:

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

Per evitare di bloccare la rendering della pagina, può essere messo alla fine dell'HTML o modificato nel modo seguente:

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

L'attributo async indica che il file deve essere caricato asincronamente (l'attributo defer è compatibile con IE).

2.加载页面逻辑代码：

假定代码文件是main.js，也放在js目录下，则用如下几种方式引入：

方式1：

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

data-main属性指定网页程序的主入口，这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js，所以可以把main.js简写成main。

方式2：

在加载require.js后，通过requirejs加载config配置文件（如有），最后加载主模块：

require([‘configUrl’],function () { //config.js必须通过requirejs加载才能注册
 require([moduleAName],function(moduelA){
 //逻辑代码
 }
});

三、主模块的写法

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

require()函数接受两个参数，第一个参数是一个数组，表示当前模块所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该回调函数，从而在回调函数内部就可以使用这些模块（被依赖的模块有return的值）。

require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有当前面依赖的模块全部下载并执行对应的回调之后，才会运行。

四、模块的配置

require.config()方法可以定义模块的路径，并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块（main.js）的前面，配合主模块一起使用。

参数是一个对象，这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径，如果远程cdn库没有加载成功，则加载本地的库。

如果不定义模块的配置，则在主模块中的依赖需要写完整路径。

在每个页面按需配置路径：

require.config({  //注册模块的配置，供后面的代码使用
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...altro codice; 
 fixHeight.init();
});

Ora configura la configurazione come un file js separato, quindi

require([“configJsUrl”],function(){  // Occorre caricare prima asincronamente la configurazione del modulo nel file main
 require([‘ModuleName’],function(Name){
 …altro codice
 }
}

Per evitare di dover incapsulare require in ogni pagina, si può usare il seguente metodo:

Creare prima un file config.js separato:

require.config({ // Configurazione del registro dei moduli, utilizzata dal codice successivo
 baseUrl: "/js/app/", // Altre dipendenze sono percorsi relativi a questa posizione
 // Configurazione delle rotte
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “modulo breve” :”indirizzo relativo al baseUrl, senza suffisso del file .js”
 },
 // Librerie scritte in modo non AMD devono essere configurate di nuovo
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（nome modulo breve deve essere definito il percorso）: {
  exports: 'Backbone',  　　　　// Nome della variabile di output della libreria, indica il nome con cui il modulo viene chiamato dall'esterno
  deps:['jquery','underscore'] // Dipendenze del modulo
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value // Parametri delle risorse js, controllo della versione e aggiornamento della cache
});
define([ 'marionette'], function () { }); // È ancora codice js eseguito, caricherà progressivamente i moduli necessari

Poi utilizzarlo in questo modo:}

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

Registra direttamente la configurazione del modulo nel namespace requirejs tramite l'ingresso principale, in modo che i metodi require successivi nella pagina non debbano essere registrati e possano utilizzare i nomi di modulo brevi per il caricamento delle dipendenze.

Se non vengono specificati config e data-main, il baseUrl predefinito è la directory della pagina HTML in cui è caricato RequireJS. Se viene specificato data-main ma non viene specificato il percorso radice in config, il percorso viene impostato come baseUrl.

Se si desidera evitare il processo di解析 "baseUrl + paths", e caricare direttamente uno script da una directory specifica, si può fare così: se un ID di modulo corrisponde a uno dei seguenti criteri, la risoluzione dell'ID eviterà la configurazione standard "baseUrl + paths" e caricherà direttamente lo script come uno script relativo al percorso del documento HTML corrente:

• Terminare con ".js".

• Iniziare con "/".

• Includere il protocollo URL, come "http:" o "https:".

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

require.js richiede che ogni modulo sia un file js separato. Il caricamento di più moduli genera più richieste HTTP, influenzando la velocità di caricamento della pagina. Pertanto, require.js fornisce uno strumento di ottimizzazione (r.js), che può essere utilizzato per combinare più moduli in un unico file dopo che i moduli sono stati distribuiti, riducendo così il numero di richieste HTTP, ma richiedendo una scelta tra cache e ottimizzazione.

Sesto: scrittura dei moduli AMD

I moduli caricati da require.js devono essere scritti secondo le regole di AMD. Questo significa che i moduli devono essere definiti utilizzando una funzione specifica define(), che di solito restituisce un oggetto con metodi o proprietà utilizzabili da altri moduli; o possono eseguire logica relativa senza output.

Settimo: plugin relativi a require.js

plugin text,Permette a require.js di caricare asincronamente risorse testuali come txt, css o html per l'uso in jssenza la necessità di costruire una stringa HTML all'interno di script.

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

Attenzione:

Le dipendenze del modulo possono essere introdotte sia attraverso [], sia attraverso il metodo require() all'interno della funzione di callback, l'effetto è lo stesso. Poiché il metodo define scansiona prima le dipendenze del metodo require all'interno della funzione di callback tramite un'espressione regolare e scarica, quindi esegue la funzione di callback. Ma in questo caso è necessario passare la dipendenza stessa di require, altrimenti verrà generato un errore:

define(function(require){
 var helper=require(‘helpModuleUrI’); // carica anche questa dipendenza in anticipo
 ...
}

Quando più moduli dipendono in successione da uno stesso modulo, il modulo verrà scaricato ed inizializzato una sola volta, dopo di che require manterrà un riferimento a esso per consentire ad altri moduli di utilizzarlo di nuovo.

Distinguere l'esecuzione del metodo require e l'esecuzione del callBack:

require('config',callBack1);
require('b',callBack2);
// I due metodi require eseguiranno immediatamente, ma l'ordine di esecuzione dei callBack è incerto, dipende dall'ordine di download.
// Diverso dal seguente codice, esegue in ordine rigoroso
require('config',function(){
 require('b',callBack2)
}

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa aiutare la tua apprendimento o lavoro in qualche modo, e speriamo di ricevere più supporto per la guida a urla!

Dichiarazione: il contenuto di questo articolo è stato preso da Internet, il diritto d'autore è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.