Nackdelar med normal JS-laddning
Gränssnittet måste börja rendera efter att js har laddats
Om det finns beroenden mellan js måste de laddas i ordning enligt beroendena. Om beroendena är komplexa är det mer besvärligt att skriva och underhålla koden
Så require.js uppstod i rösten från folkets breda massor.
Rollen som require.js
Implementera asynkron inläsning av js för att undvika att sidan inte svarar på
Hantera beroenden mellan moduler för att underlätta kodskrivning och underhåll
require.js lastning
Gå först till [den officiella webbplatsen] http://requirejs.org/ ladda ner den senaste versionen
Lägg in den nedladdade eller kopierade require.js i projektkatalogen
Ladda require.js på önskad sida
Direct load: Skriv <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynkron laddning: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Observera: asynkron betyder att denna fil måste laddas asynkront för att undvika att webbsidan blir oresponsiv. IE stöder inte asynkron, så ladda in defer-attributet;
När require.js är laddad är nästa steg att ladda vår egen kod. Anta att vår egen kodfil är main.js, också placerad under js-katalogen. Skriv bara följande: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Funktionen för data-main-attributet är att specificera huvudmodulen i webbprogrammet. I exemplet ovan laddas denna fil först require.js main.js under js-katalogen. Eftersom require.js standardfilsuffix är js kan du förkorta main.js till main.
Hur man skriver huvudmodulen
main.js från föregående avsnitt kallas huvudmodulen. Det vill säga inträdesmetoden för hela modulen.
Hur man skriver main.js
Metoder skrivna direkt till main.js utan att förlita sig på andra moduler
main.function()
Huvudmodulen är beroende av andra moduler, så använd funktionen require()
main.js
rechare(['moduleA', 'moduleB', 'moduleC'], funktion (moduleA, moduleB, moduleC){
Lite kod här
});
Funktionen require() accepterar två parametrar:
Den första parametern är en array som representerar modulerna att bero på
Den andra parametern är en callback-funktion som anropas efter att alla moduler som anges i fronten har laddats. De tillagda modulerna skickas i form av parametrar, så att de kan användas i callback-funktionen.
Laddning av moduler
Exempel: Om den beroende modulen för huvudmodulen (main.js) är ['jquery', 'crypto-js', 'vad som helst']
Laddar som standard
Om filerna i dessa tre beroende moduler är jquery.js, crypto-js.js, anything.js och main.js i samma katalog kan de automatiskt laddas enligt föregående avsnitt
Config load require.config()
require.config() skrivs i huvudet på huvudmodulen (main.js).
Hur AMD-moduler skrivs
require.js laddad modul, med AMD-specifikation. Det vill säga, modulen måste skrivas enligt AMD:s regler.
Specifikt måste moduler definieras av en specifik define()-funktion. Om en modul inte är beroende av andra moduler kan den definieras direkt i define()-funktionen
Antag att det nu finns en math.js fil som definierar en matematikmodul. Sedan skriver math.js:
Så här laddar du:
Om modulen också beror på andra moduler måste det första argumentet i define()-funktionen vara en array som anger modulens beroenden.
När funktionen require() laddar ovanstående modul, kommer den att ladda myLib.js fil först.
Ladda icke-AMD-moduler
Det finns många moduler på marknaden som inte uppfyller AMD:s specifikation require.js kan laddas
Innan dessa moduler kan laddas måste de ställas in till require.config() för att definiera några av deras egenskaper
Till exempel är noamd.js och noamddeps.js båda moduler icke-AMD-moduler, och om du vill ladda dem måste du definiera deras egenskaper:
require.js accepterar ett konfigurationsobjekt som, utöver paths-egenskapen, även har en shim-egenskap specifikt för att konfigurera icke-AMD-moduler.
Specifikt definierar varje modul:
- exporterar värde (utdatavariabelns namn): anger namnet på modulen när den anropas externt
- deps-array: anger beroendena i denna modul
Till exempel kan jQuery-pluginet definieras så här:
require.js plugin
require.js erbjuder också en rad plugins som implementerar vissa specialfunktioner
Domready-pluginet tillåter callback-funktionen att köras efter att sid-DOM-strukturen har laddats:
Text- och bildplugins, som tillåter require.js att ladda text- och bildfiler:
Liknande plugins inkluderar JSON och MDOWN för att ladda JSON- och Markdown-filer.
|
Publicerad på 2017-10-11 09:31:50
|
|
|
