Dezavantaje ale încărcării JS normale
Interfața trebuie să înceapă randarea după ce js-ul este încărcat
Dacă există dependențe între js, ele trebuie încărcate în ordine conform dependențelor. Dacă dependențele sunt complexe, este mai dificil să scrii și să întreții codul
Astfel, require.js luat naștere în vocea maselor largi ale poporului.
Rolul require.js
Implementează încărcarea asincronă a js pentru a evita lipsa de răspuns a paginilor
Gestionarea dependențelor dintre module pentru a facilita scrierea și întreținerea codului
require.js încărcare
Mai întâi, accesează [site-ul oficial] http://requirejs.org/ descarcă cea mai recentă versiune
Depuneți require.js descărcate sau copiate în directorul proiectului
Încarcă require.js pe pagina dorită
Încărcare directă: Scrie <scrip{filter}t src="js/require.js"></scrip{filter}t>
Încărcare asincronă: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Notă: async înseamnă că acest fișier trebuie încărcat asincron pentru a evita ca pagina web să nu răspundă. IE nu suportă async, deci încarcă atributul de amânare;
Odată ce require.js este încărcat, următorul pas este să încărcăm propriul nostru cod. Să presupunem că propriul nostru fișier de cod este main.js, de asemenea plasat sub directorul js. Așadar, scrie următoarele: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funcția atributului data-main este de a specifica modulul principal al programului web. În exemplul de mai sus, acest fișier va fi încărcat mai întâi require.js main.js sub directorul js. Deoarece sufixul implicit require.js fișier este js, poți main.js prescurtat la main.
Cum să scrii modulul principal
main.js din secțiunea anterioară se numește modulul principal. Adică metoda de introducere pentru întregul modul.
Cum să scrii main.js
Metode scrise direct în main.js fără a se baza pe alte module
main.function()
Modulul principal depinde de alte module, așa că folosiți funcția require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], funcția (moduleA, moduleB, moduleC){
Puțin cod aici
});
Funcția require() acceptă doi parametri:
Primul parametru este un tablou care reprezintă modulele de care trebuie să depindă
Al doilea parametru este o funcție de callback care va fi apelată după ce toate modulele specificate în față sunt încărcate. Modulele adăugate sunt transmise sub forma unor parametri, astfel încât să poată fi folosite în cadrul funcției de callback.
Încărcarea modulelor
Exemplu: Dacă modulul dependent al modulului principal (main.js) este ['jquery', 'crypto-js', 'orice']
Încărcarea implicită
Dacă fișierele acestor trei module dependente sunt jquery.js, crypto-js.js, anything.js și main.js în același director, ele pot fi încărcate automat conform secțiunii anterioare
Încărcarea configurării require.config()
Require.config() este scris în capul modulului principal (main.js).
Cum sunt scrise modulele AMD
require.js încărcat modulul, folosind specificația AMD. Adică, modulul trebuie să fie scris conform reglementărilor AMD.
Mai exact, modulele trebuie definite de o funcție definită() specifică. Dacă un modul nu depinde de alte module, poate fi definit direct în funcția define()
Să presupunem că acum există un fișier math.js care definește un modul de matematică. Apoi, math.js scrie:
Iată cum să încarci:
Dacă modulul depinde și de alte module, atunci primul argument al funcției define() trebuie să fie un tablou care indică dependențele modulului.
Când funcția requir() încarcă modulul de mai sus, va încărca mai întâi myLib.js fișier.
Încarcă module non-AMD
Există multe module pe piață care nu îndeplinesc specificațiile AMD require.js pot fi încărcate
Înainte ca aceste module să se poată încărca, trebuie setate pe required.config() pentru a defini unele dintre caracteristicile lor
De exemplu, noamd.js și noamddeps.js ambele module sunt module non-AMD, iar dacă vrei să le încarci, trebuie să le definești caracteristicile:
require.js acceptă un obiect de configurație care, pe lângă proprietatea de căi, are și o proprietate de shim specifică pentru configurarea modulelor non-AMD.
Mai exact, fiecare modul definește:
- valoarea exporturilor (numele variabilei de ieșire): indică numele modulului atunci când este apelat extern
- ARRAY-ul deps: indică dependențele acestui modul
De exemplu, pluginul jQuery poate fi definit astfel:
require.js plugin
require.js oferă, de asemenea, o gamă de pluginuri care implementează unele funcții speciale
Pluginul domready permite funcției de callback să ruleze după ce structura DOM-ului paginii este încărcată:
pluginuri de text și imagine, care permit require.js să încarce fișiere text și imagini:
Pluginuri similare includ JSON și MDOWN pentru încărcarea fișierelor JSON și Markdown.
|
Postat pe 11.10.2017 09:31:50
|
|
|
