Svantaggi del normale caricamento JS
L'interfaccia deve iniziare a renderizzare dopo che il js è stato caricato
Se ci sono dipendenze tra i j, devono essere caricate in ordine secondo le dipendenze. Se le dipendenze sono complesse, è più complicato scrivere e mantenere il codice
Così, require.js nacque nella voce delle ampie masse del popolo.
Il ruolo di require.js
Implementa il caricamento asincrono di js per evitare la mancata risposta delle pagine
Gestire le dipendenze tra moduli per facilitare la scrittura e la manutenzione del codice
require.js caricamento
Per prima cosa, vai sul [sito ufficiale] http://requirejs.org/ scarica l'ultima versione
Deposita le require.js scaricate o copiate nella directory del progetto
Carica require.js sulla pagina desiderata
Caricamento diretto: Scrivi <scrip{filter}t src="js/require.js"></scrip{filter}t>
Caricamento asincrono: <scrip{filter}t src="js/require.js" deferrare async="true" ></scrip{filter}t>
Nota: async significa che questo file deve essere caricato in modo asincrono per evitare che la pagina web diventi non reattiva. IE non supporta asincrono, quindi carichi l'attributo di differenza;
Una volta caricato il require.js, il passo successivo è caricare il nostro codice. Supponiamo che il nostro file di codice sia main.js, anch'esso inserito nella directory js. Quindi, scrivi semplicemente quanto segue: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
La funzione dell'attributo data-main è specificare il modulo principale del programma web. Nell'esempio sopra, questo file verrà caricato prima require.js main.js sotto la directory js. Dato che require.js suffisso predefinito del file è js, puoi main.js abbreviata a main.
Come scrivere il modulo principale
Il main.js della sezione precedente è chiamato modulo principale. Cioè il metodo di ingresso per l'intero modulo.
Come scrivere main.js
Metodi scritti direttamente sul main.js senza dover fare affidamento su altri moduli
main.function()
Il modulo principale dipende da altri moduli, quindi usa la funzione require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Un po' di codice qui
});
La funzione require() accetta due parametri:
Il primo parametro è un array che rappresenta i moduli da cui dipendere
Il secondo parametro è una funzione callback che verrà chiamata dopo che tutti i moduli specificati in fascicolo frontale saranno stati caricati. I moduli aggiunti vengono passati sotto forma di parametri, così da poter essere utilizzati all'interno della funzione di callback.
Caricamento dei moduli
Esempio: Se il modulo dipendente del modulo principale (main.js) è ['jquery', 'crypto-js', 'anything']
Caricamento predefinito
Se i file di questi tre moduli dipendenti sono jquery.js, crypto-js.js, anything.js e main.js nella stessa directory, possono essere caricati automaticamente secondo la sezione precedente
Caricamento di configurazione require.config()
Require.config() è scritto nella testa del modulo principale (main.js).
Come sono scritti i moduli AMD
require.js modulo caricato, utilizzando le specifiche AMD. Cioè, il modulo deve essere scritto secondo le normative AMD.
In particolare, i moduli devono essere definiti da una funzione specifica define(). Se un modulo non dipende da altri moduli, può essere definito direttamente nella funzione define()
Supponiamo che ora esista un file math.js che definisce un modulo matematico. Poi, math.js scrivere:
Ecco come caricare:
Se il modulo dipende anche da altri moduli, allora il primo argomento della funzione define() deve essere un array che indica le dipendenze del modulo.
Quando la funzione requir() carica il modulo sopra, caricherà prima myLib.js file.
Carica moduli non AMD
Ci sono molti moduli sul mercato che non soddisfano le specifiche AMD require.js possono essere caricati
Prima che questi moduli possano caricarsi, devono essere impostati su required.config() per definire alcune delle loro caratteristiche
Ad esempio, noamd.js e noamddeps.js entrambi i moduli sono moduli non AMD, e se vuoi caricarli, devi definire le loro caratteristiche:
require.js accetta un oggetto di configurazione che, oltre alla proprietà paths, possiede anche una proprietà shim specifica per configurare moduli non AMD.
Nello specifico, ogni modulo definisce:
- Export Value (nome variabile di output): indica il nome del modulo quando viene chiamato esternamente
- Array DEPS: indica le dipendenze di questo modulo
Ad esempio, il plugin jQuery può essere definito così:
require.js plugin
require.js offre anche una serie di plugin che implementano alcune funzionalità speciali
Il plugin domready permette alla funzione di callback di eseguire dopo che la struttura del DOM della pagina è caricata:
plugin di testo e immagini, che permettono require.js di caricare file di testo e immagini:
Plugin simili includono JSON e MDOWN per il caricamento di file JSON e Markdown.
|
Pubblicato su 11/10/2017 09:31:50
|
|
|
