Dieser Artikel ist eine Zusammenfassung einiger Wissenspunkte von Anforderungen, begleitet von Beispielanalysen in mehrseitigen Anwendungen.
Die Verzeichnisstruktur dieses Falles lautet wie folgt:
RequiredJS API Drei Hauptfunktionen: Definieren (Modul erstellen), fordern (lastmodul) und config (config)
1. Laden Sie die JS -Datei in die HTML -Datei
Der Inhalt von Seite1.html lautet wie folgt:
<!DOCTYPE html><html><head><title>Page 1</title><script data-main="scripts/page1" src="scripts/lib/require.js"></script></head><body><a href="page2.html">Go to Page 2</a></body></html>
Der Inhalt von Page2.html lautet wie folgt:
<!DOCTYPE html><html><head><title>Page 2</title><script data-main="scripts/page2" src="scripts/lib/require.js"></script></head><body><a href="page1.html">Go to Page 1</a></body></html>
Wissenserweiterung:
Das Data-Main-Attribut gibt das Hauptmodul des Webprogramms an, und diese Datei wird zunächst durch RequiredJS geladen. Da der Standard -Datei -Suffix -Name von RequestJS JS ist, kann Seite1.js als Seite1 abgekürzt werden
Root Pfad Prioritätsregeln für das Laden von Skriptdateien
Beim Laden eines Moduls mit Request () wird das .js -Suffix weggelassen und von BaseURL von durchsucht. Wenn es ein .js -Suffix hat oder mit "/" beginnt oder das URL -Protokoll (http/https) enthält, wird die Wurzel sein
Suchen Sie nach Ihren spezifischen Pfadeinstellungen
Konfiguration> Data-Main> Standard BaseURL
Wenn Datenmainer und Konfiguration nicht festgelegt sind, ist das Standard-BasisaRL das Verzeichnis, in dem sich die HTML-Seite, die Referenzen erfordern. Js, befindet.
Setzen Sie die Data-Main, dann ist BaseURL das Verzeichnis, in dem sich das Hauptmodul befindet (z. B. das Hauptmodul in der ersten HTML ist Seite1.js, daher ist das Verzeichnis, in dem es sich befindet/Skripte, das Stammverzeichnis).
Konfigurieren Sie die Konfiguration, setzen Sie BaseURL explizit und setzen Sie auch einen separaten Pfad für jedes Modul.
2. Konfigurieren Sie die Pfade der Module usw.
Verwenden Sie die Methode von Request.config (), um das Ladeverhalten des Moduls anzupassen. In einer mehrseitigen Anwendung kann die Konfiguration in einer freigegebenen Datei wie der Common.js-Datei in diesem Beispiel geschrieben werden. Nachdem jede Seite die aktuelle Konfiguration geladen hat, werden die erforderlichen Module in der Rückruffunktion geladen.
Der Code für Common.js lautet wie folgt:
Required.config ({BaseUrl: 'Skripts/App', Pfade: {jQuery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.Min',''../lib/jquery']}});Wissenserweiterung:
Unterstützte Konfigurationselemente:
BasisaRl:
Der Suchrootpfad für alle Module. HINWEIS: Wenn die geladene JS -Datei (endet mit .JS, mit "/" beginnt, enthält ein Protokoll), wird BaseUrl nicht verwendet.
Pfade:
Pfadkartenmodulnamen, die nicht direkt unter Baseurl platziert sind. Die Startposition beim Einstellen des Pfades ist relativ zu BaseURL, es sei denn, die Pfadeinstellung beginnt mit "/" oder enthält ein URL -Protokoll.
Hinweis: Der in Pfaden definierte Pfad kann nicht .JS -Suffixe enthalten, da der Pfadauflösungsmechanismus automatisch .Js -Suffixe hinzugefügt wird. und der Ladepfad kann mehrmals eingestellt werden. Wenn das Laden von CDN fehlschlägt, wird die lokale JS -Datei geladen.
Shim:
Konfigurieren Sie für Module, die Define () nicht verwenden, um Abhängigkeiten zu deklarieren.
Es gibt zwei Parameter, auf die geachtet werden müssen:
(1) exportiert Wert (Ausgabevariabler Name), Methodenschnittstelle freilegen
(2) DEPS -Array, das die Abhängigkeit des Moduls angibt
wie:
Required.config ({Basisurl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {deps: ['unterstrich', 'zepto'], exports: 'backbone'}, 'zepto.animima': ['zepto']}});3. Modulbelastung
Der Code von Seite1.js lautet wie folgt:
fordern (['./ Common'], function (Common) {fordern (['sayPage1'], Funktion (SayPage1) {sayPage1.hello ();});});Der Code von Page2.js lautet wie folgt:
fordern (['./ Common'], function (Common) {fordern (['sayPage2'], Funktion (SayPage2) {sayPage2.hello ();});});Wissenserweiterung:
Die Funktion von Request () akzeptiert zwei Parameter. Der erste Parameter ist ein Array, das das Modul darstellt, zu dem es abhängt. Der zweite Parameter ist eine Rückruffunktion und wird erst aufgerufen, nachdem alle derzeit angegebenen Module erfolgreich geladen wurden. Das geladene Modul kann als Parameter für die Rückruffunktion aufgerufen werden.
Um sicherzustellen, dass das erforderliche Modul erst nach Abschluss der Konfiguration geladen wird, dient es hauptsächlich für die korrekte Analyse des Pfades und erfordert dies in der Rückruffunktion.
4. Definition von Modulen
Code in SaysPage1.js:
Define (['jQuery'], function ($) {function SayShi () {$ ('body'). append ('<h1> Hallo Seite1! </h1>');} return {hello: sayhi}});Wissenserweiterung:
Die Define -Funktion akzeptiert auch zwei Parameter. Der erste Parameter ist ein Array von abhängigen Modulen, und der zweite Parameter ist eine Rückruffunktion.
Natürlich müssen JS -Dateien, wenn es schließlich gestartet wird, zusammengeführt und komprimiert werden. Sie können R.Js verwenden, was bequem und schnell ist ~
Die oben genannte Beispielanalyse der multi-seitigen Anforderungen von RequiresJS, die der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!