Ulemper ved normal JS-indlæsning
Interfacet skal begynde at rendere efter js'en er indlæst
Hvis der er afhængigheder mellem js, skal de indlæses i rækkefølge efter afhængighederne. Hvis afhængighederne er komplekse, er det mere besværligt at skrive og vedligeholde koden
Så require.js opstod i stemmen fra de brede masser af folket.
Rollen som require.js
Implementer asynkron indlæsning af js for at undgå sideuresponsivitet
Styr afhængigheder mellem moduler for at lette kodeskrivning og vedligeholdelse
require.js indlæsning
Gå først til [den officielle hjemmeside] http://requirejs.org/ download den nyeste version
Indsend det downloadede eller kopierede require.js i projektmappen
Indlæs require.js på den ønskede side
Direct load: Skriv <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynkron indlæsning: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Bemærk: asynkron betyder, at denne fil skal indlæses asynkront for at undgå, at websiden bliver uresponsiv. IE understøtter ikke asynkron, så indlæs defer-attributten;
Når require.js er indlæst, er næste skridt at indlæse vores egen kode. Antag, at vores egen kodefil er main.js, også placeret under js-mappen. Så skriv bare følgende: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funktionen af data-main-attributten er at specificere hovedmodulet i webprogrammet. I ovenstående eksempel vil denne fil først blive indlæst require.js main.js under js-mappen. Da require.js standardfil-endelse er js, kan du forkorte main.js til main.
Sådan skriver du hovedmodulet
main.js fra det foregående afsnit kaldes hovedmodulet. Det vil sige indgangsmetoden for hele modulet.
Hvordan skriver man main.js
Metoder skrevet direkte til main.js uden at være afhængige af andre moduler
main.function()
Hovedmodulet afhænger af andre moduler, så brug funktionen require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], funktion (moduleA, moduleB, moduleC){
Lidt kode her
});
Require()-funktionen accepterer to parametre:
Den første parameter er et array, der repræsenterer modulerne, der skal afhænge af
Den anden parameter er en callback-funktion, der kaldes, efter at alle modulerne specificeret i fronten er indlæst. De tilføjede moduler sendes i form af parametre, så de kan bruges inde i callback-funktionen.
Indlæsning af moduler
Eksempel: Hvis det afhængige modul for hovedmodulet (main.js) er ['jquery', 'crypto-js', 'anything']
Indlæsning som standard
Hvis filerne for disse tre afhængige moduler er jquery.js, crypto-js.js, anything.js og main.js i samme mappe, kan de automatisk indlæses i henhold til det foregående afsnit
Config load require.config()
require.config() skrives i hovedet af hovedmodulet (main.js).
Hvordan AMD-moduler skrives
require.js indlæste modulet efter AMD-specifikation. Det vil sige, modulet skal skrives i henhold til AMD's regler.
Specifikt skal moduler defineres ved en specifik define()-funktion. Hvis et modul ikke afhænger af andre moduler, kan det defineres direkte i define()-funktionen
Antag, at der nu findes en math.js-fil, der definerer et matematikmodul. Derefter skriver math.js:
Sådan indlæser du:
Hvis modulet også afhænger af andre moduler, må det første argument i define()-funktionen være et array, der angiver modulets afhængigheder.
Når funktionen require() indlæser ovenstående modul, indlæser den først filen i myLib.js fil.
Indlæs ikke-AMD-moduler
Der findes mange moduler på markedet, som ikke opfylder AMD-specifikationen, require.js kan indlæses
Før disse moduler kan indlæses, skal de sættes til require.config() for at definere nogle af deres karakteristika
For eksempel er noamd.js og noamddeps.js begge moduler ikke-AMD-moduler, og hvis du vil indlæse dem, skal du definere deres karakteristika:
require.js accepterer et konfigurationsobjekt, som ud over paths-egenskaben også har en shim-egenskab specifikt til konfiguration af ikke-AMD-moduler.
Specifikt definerer hvert modul:
- eksporterer værdi (outputvariabelnavn): angiver navnet på modulet, når det kaldes eksternt
- DEPS-array: angiver afhængighederne af dette modul
For eksempel kan jQuery-plugin'et defineres således:
require.js plugin
require.js tilbyder også en række plugins, der implementerer nogle særlige funktioner
Domready-plugin'et tillader callback-funktionen at køre efter side-DOM-strukturen er indlæst:
Tekst- og billedplugins, som tillader require.js at indlæse tekst- og billedfiler:
Lignende plugins inkluderer JSON og MDOWN til indlæsning af JSON- og Markdown-filer.
|
Opslået på 11/10/2017 09.31.50
|
|
|
