Slabosti običajnega JS obremenjevanja
Vmesnik mora začeti z upodabljanjem po nalaganju js
Če obstajajo odvisnosti med js, jih je treba naložiti po vrstnem redu glede na odvisnosti. Če so odvisnosti kompleksne, je pisanje in vzdrževanje kode bolj zahtevno
Tako require.js nastal v glasu širokih množic ljudstva.
Vloga require.js
Implementirajte asinhrono nalaganje js, da se izognete neodzivnosti strani
Upravljanje odvisnosti med moduli za lažje pisanje in vzdrževanje kode
require.js nalaganje
Najprej obiščite [uradno spletno stran] http://requirejs.org/ prenesite najnovejšo različico
Preneseni ali kopirani require.js shranite v imenik projekta
Naloži require.js na želeno stran
Direct load: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asinhrono nalaganje: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Opomba: asinhrona datoteka pomeni, da je treba to datoteko naložiti asinhrono, da spletna stran ne postane neodzivna. IE ne podpira asinhronizacije, zato naloži atribut odloženega;
Ko je require.js naložen, je naslednji korak nalaganje lastne kode. Predpostavimo, da je naša lastna kodna datoteka main.js, prav tako postavljena pod js imenik. Torej, preprosto napišite naslednje: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funkcija atributa data-main je določiti glavni modul spletnega programa. V zgornjem primeru bo ta datoteka najprej naložena require.js main.js pod js mapo. Ker je require.js privzeta pripona js, lahko main.js na main.
Kako napisati glavni modul
main.js iz prejšnjega razdelka se imenuje glavni modul. To pomeni način vstopa za celoten modul.
Kako napisati main.js
Metode, napisane neposredno na main.js brez zanašanja na druge module
main.function()
Glavni modul je odvisen od drugih modulov, zato uporabite funkcijo require()
main.js
zahtevajo(['moduleA', 'moduleB', 'moduleC'], funkcija (moduleA, modulB, modulC){
Nekaj kode tukaj
});
Funkcija zahteva() sprejema dva parametra:
Prvi parameter je polje, ki predstavlja module, na katere je treba biti odvisen
Drugi parameter je funkcija povratnega klica, ki se pokliče po nalaganju vseh modulov, navedenih na sprednji strani. Dodani moduli se posredujejo v obliki parametrov, da jih je mogoče uporabiti znotraj funkcije callback.
Nalaganje modulov
Primer: Če je odvisni modul glavnega modula (main.js) ['jquery', 'crypto-js', 'karkoli']
Privzeto nalaganje
Če so datoteke teh treh odvisnih modulov jquery.js, crypto-js.js, anything.js in main.js v isti mapi, se lahko samodejno naložijo v skladu s prejšnjim razdelkom
Config load require.config()
require.config() je zapisan v glavi glavnega modula (main.js).
Kako so napisani AMD moduli
require.js naložen modul, po AMD specifikaciji. To pomeni, da mora biti modul napisan v skladu z AMD-jevimi predpisi.
Natančneje, moduli morajo biti definirani s specifično funkcijo define(). Če modul ni odvisen od drugih modulov, ga lahko definiramo neposredno v funkciji define()
Predpostavimo, da zdaj obstaja math.js datoteka, ki definira matematični modul. Nato math.js napišite:
Tukaj je, kako naložiti:
Če modul je odvisen tudi od drugih modulov, mora biti prvi argument funkcije define() polje, ki označuje odvisnosti modula.
Ko funkcija zahteva() naloži zgornji modul, se najprej naloži myLib.js datoteka.
Nalaganje ne-AMD modulov
Na trgu je veliko modulov, ki ne ustrezajo AMD specifikacijam, require.js jih je mogoče naložiti
Preden se ti moduli lahko naložijo, jih je treba nastaviti tako, da zahtevajo require.config() za določitev nekaterih njihovih značilnosti
Na primer, noamd.js in noamddeps.js oba modula nista AMD, in če ju želiš naložiti, moraš definirati njune značilnosti:
require.js sprejema konfiguracijski objekt, ki poleg lastnosti poti ima tudi lastnost podlage, namenjeno konfiguraciji modulov, ki niso AMD.
Natančneje, vsak modul definira:
- izvozna vrednost (ime izhodne spremenljivke): označuje ime modula, ko je klican zunaj
- DEPS matrika: označuje odvisnosti tega modula
Na primer, vtičnik jQuery lahko definiramo takole:
require.js vtičnik
require.js ponuja tudi vrsto vtičnikov, ki vključujejo nekatere posebne funkcije
Vtičnik domready omogoča, da funkcija povratnih klicev teče po nalaganju strukture DOM strani:
Vtičniki za besedilo in slike, ki require.js omogočajo nalaganje besedilnih in slikovnih datotek:
Podobni vtičniki vključujejo JSON in MDOWN za nalaganje JSON in Markdown datotek.
|
Objavljeno na 11. 10. 2017 09:31:50
|
|
|
