Nadelen van normaal JS-laden
De interface moet beginnen met renderen nadat de js is geladen
Als er afhankelijkheden tussen js zijn, moeten deze in volgorde worden geladen volgens de afhankelijkheden. Als de afhankelijkheden complex zijn, is het lastiger om de code te schrijven en te onderhouden
Zo ontstond require.js in de stem van de brede massa's van het volk.
De rol van require.js
Implementeer asynchrone laadtijd van js om pagina-onresponsiviteit te voorkomen
Beheer afhankelijkheden tussen modules om het schrijven en onderhoud van code te vergemakkelijken
require.js laden
Ga eerst naar de [officiële website] http://requirejs.org/ download de nieuwste versie
Stort de gedownloade of gekopieerde require.js in de projectmap
Laad require.js op de gewenste pagina
Direct load: Schrijf <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchrone lading: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Opmerking: asynchroon betekent dat dit bestand asynchroon geladen moet worden om te voorkomen dat de webpagina niet reageert. IE ondersteunt geen async, dus laad het defer-attribuut;
Zodra de require.js geladen is, is de volgende stap het laden van onze eigen code. Stel dat ons eigen codebestand main.js is, ook onder de js-directory geplaatst. Schrijf dus gewoon het volgende: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
De functie van het data-main-attribuut is om de hoofdmodule van het webprogramma te specificeren. In het bovenstaande voorbeeld wordt dit bestand eerst geladen require.js de main.js onder de js-map. Omdat require.js standaardbestandsachtervoegsel js is, kun je main.js afkorting naar main.
Hoe schrijf je de hoofdmodule
De main.js uit de vorige sectie heet de hoofdmodule. Dat betekent de instapmethode voor de hele module.
Hoe schrijf je main.js
Methoden die direct naar de main.js worden geschreven zonder te vertrouwen op andere modules
main.function()
De hoofdmodule is afhankelijk van andere modules, dus gebruik de require()-functie
main.js
require(['moduleA', 'moduleB', 'moduleC'], functie (moduleA, moduleB, moduleC){
Hier wat code
});
De require()-functie accepteert twee parameters:
De eerste parameter is een array die de modules voorstelt waarop afhangen
De tweede parameter is een callback-functie die wordt aangeroepen nadat alle modules die aan de voorkant zijn gespecificeerd, zijn geladen. De toegevoegde modules worden in de vorm van parameters doorgegeven, zodat ze binnen de callback-functie kunnen worden gebruikt.
Laden van modules
Voorbeeld: Als de afhankelijke module van de hoofdmodule (main.js) ['jquery', 'crypto-js', 'anything'] is
Standaard laden
Als de bestanden van deze drie afhankelijke modules in dezelfde map jquery.js, crypto-js.js, anything.js en main.js zijn, kunnen ze automatisch worden geladen volgens de vorige sectie
Config load require.config()
require.config() wordt geschreven in het hoofd van de hoofdmodule (main.js).
Hoe AMD-modules worden geschreven
require.js geladen module, met AMD-specificatie. Dat wil zeggen, de module moet worden geschreven volgens de regelgeving van AMD.
Specifiek moeten modules worden gedefinieerd door een specifieke define()-functie. Als een module niet afhankelijk is van andere modules, kan deze direct worden gedefinieerd in de define()-functie
Stel dat er nu een math.js bestand is dat een wiskundemodule definieert. Daarna schrijf math.js:
Zo laad je:
Als de module ook afhankelijk is van andere modules, dan moet het eerste argument van de define()-functie een array zijn die de afhankelijkheden van de module aangeeft.
Wanneer de require()-functie bovenstaande module laadt, laadt deze eerst myLib.js bestand.
Laad niet-AMD-modules
Er zijn veel modules op de markt die niet aan de AMD-specificatie voldoen, require.js kunnen worden geladen
Voordat deze modules kunnen laden, moeten ze worden ingesteld op revire.config() om enkele van hun kenmerken te definiëren
Bijvoorbeeld, noamd.js en noamddeps.js beide modules niet-AMD-modules zijn, en als je ze wilt laden, moet je hun kenmerken definiëren:
require.js accepteert een configuratieobject dat, naast de paths-eigenschap, ook een shim-eigenschap heeft specifiek voor het configureren van niet-AMD-modules.
Specifiek definieert elke module:
- exporteert waarde (naam van de uitvoervariabele): geeft de naam van de module aan wanneer deze extern wordt aangeroepen
- deps-array: geeft de afhankelijkheden van deze module aan
De jQuery-plugin kan bijvoorbeeld als volgt worden gedefinieerd:
require.js plugin
require.js biedt ook een reeks plugins die enkele speciale functies implementeren
De domready-plugin laat de callback-functie draaien nadat de page DOM-structuur is geladen:
Tekst- en afbeeldingsplugins, waarmee require.js tekst- en afbeeldingsbestanden kunnen laden:
Vergelijkbare plugins zijn onder andere JSON en MDOWN voor het laden van JSON- en Markdown-bestanden.
|
Geplaatst op 11-10-2017 09:31:50
|
|
|
