Ulemper med normal JS-lasting
Grensesnittet må begynne å rendre etter at js-filen er lastet inn
Hvis det finnes avhengigheter mellom js, må de lastes inn i rekkefølge etter avhengighetene. Hvis avhengighetene er komplekse, er det mer problematisk å skrive og vedlikeholde koden
Så, require.js ble til i stemmen til de brede massene av folket.
Rollen til require.js
Implementer asynkron lasting av js for å unngå sideuresponsivitet
Administrer avhengigheter mellom moduler for å lette kodeskriving og vedlikehold
require.js lasting
Først, gå til [den offisielle nettsiden] http://requirejs.org/ last ned den nyeste versjonen
Plasser den nedlastede eller kopierte require.js i prosjektkatalogen
Last require.js på ønsket side
Direct load: Skriv <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynkron lasting: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Merk: asynkron betyr at denne filen må lastes asynkront for å unngå at nettsiden blir uresponsiv. IE støtter ikke asynkron, så last inn defer-attributtet;
Når require.js er lastet inn, er neste steg å laste inn vår egen kode. La oss si at vår egen kodefil er main.js, også plassert under js-katalogen. Så, bare skriv følgende: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funksjonen til data-main-attributtet er å spesifisere hovedmodulen i webprogrammet. I eksempelet ovenfor vil denne filen først lastes inn require.js main.js under js-katalogen. Siden require.js standard fil-suffikset er js, kan du forkorte main.js til main.
Hvordan skrive hovedmodulen
main.js fra forrige seksjon kalles hovedmodulen. Det vil si inngangsmetoden for hele modulen.
Hvordan skrive main.js
Metoder skrevet direkte til main.js uten å være avhengig av andre moduler
main.function()
Hovedmodulen er avhengig av andre moduler, så bruk funksjonen require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], funksjon (moduleA, moduleB, moduleC){
Litt kode her
});
Require()-funksjonen aksepterer to parametere:
Den første parameteren er et array som representerer modulene som skal avhenge av
Den andre parameteren er en callback-funksjon som kalles etter at alle modulene spesifisert i fronten er lastet inn. De tillagte modulene sendes i form av parametere, slik at de kan brukes inne i callback-funksjonen.
Lasting av moduler
Eksempel: Hvis den avhengige modulen til hovedmodulen (main.js) er ['jquery', 'crypto-js', 'anything']
Laster som standard
Hvis filene til disse tre avhengige modulene er jquery.js, crypto-js.js, anything.js og main.js i samme mappe, kan de automatisk lastes inn i henhold til forrige seksjon
Config load require.config()
require.config() skrives i hodet på hovedmodulen (main.js).
Hvordan AMD-moduler skrives
require.js lastet modul, med AMD-spesifikasjon. Det vil si at modulen må skrives i henhold til AMDs forskrifter.
Spesifikt må moduler defineres av en spesifikk define()-funksjon. Hvis en modul ikke avhenger av andre moduler, kan den defineres direkte i define()-funksjonen
Anta at det nå finnes en math.js-fil som definerer en matematikkmodul. Deretter skriver math.js:
Slik laster du inn:
Hvis modulen også avhenger av andre moduler, må det første argumentet i define()-funksjonen være et array som indikerer modulens avhengigheter.
Når funksjonen require() laster modulen ovenfor, vil den laste filen myLib.js først.
Last inn ikke-AMD-moduler
Det finnes mange moduler på markedet som ikke oppfyller AMD-spesifikasjonen, require.js kan lastes inn
Før disse modulene kan lastes, må de settes til require.config() for å definere noen av egenskapene deres
For eksempel er noamd.js og noamddeps.js begge moduler ikke-AMD-moduler, og hvis du vil laste dem, må du definere deres egenskaper:
require.js aksepterer et konfigurasjonsobjekt som, i tillegg til paths-egenskapen, også har en shim-egenskap spesielt for konfigurasjon av ikke-AMD-moduler.
Spesifikt definerer hver modul:
- eksporterer verdi (utdatavariabelnavn): angir navnet på modulen når den kalles eksternt
- deps-array: indikerer avhengighetene til denne modulen
For eksempel kan jQuery-pluginen defineres slik:
require.js plugin
require.js tilbyr også en rekke plugins som implementerer noen spesielle funksjoner
Domready-pluginen lar callback-funksjonen kjøre etter at side-DOM-strukturen er lastet inn:
Tekst- og bilde-plugins, som lar require.js laste inn tekst- og bildefiler:
Lignende plugins inkluderer JSON og MDOWN for lasting av JSON- og Markdown-filer.
|
Publisert på 11.10.2017 09:31:50
|
|
|
