Die Standard -Lademethode von JS über Skript -Tags wird synchronisiert, dh nach dem Laden der JS im ersten Skript -Tag beginnt der zweite geladen zu werden und so weiter, bis alle JS -Dateien geladen sind. Darüber hinaus müssen die Abhängigkeiten von JS durch Skriptreihenfolge sichergestellt werden. Während JS -Laden wird der Browser nicht mehr reagieren, was die Benutzererfahrung stark beeinflusst. Basierend darauf sind viele Lösungen für JS erschienen und geladen, was JS erfordert.
Die von Anforderungsgeschäften geladenen Module sind im Allgemeinen Module, die den AMD -Standards entsprechen, dh Module, die mit Definieren und Rückgabe von Methoden und Variablen mit Ruturn definieren und zurückgeben. RequiredJs können auch Module laden, die AMD -Standards fliegen, es ist jedoch schwieriger und wird diesmal nicht beteiligt.
Das Laden von JS -Hauptaspekten beinhaltet die folgenden Aspekte:
HTML -Demo
<script src = "js/required.js" defer async = "true" data-main = "js/main"> <!-Geben Sie den erforderlichen Pfad an, deklarieren Sie es als asynchronis
main.js
fordern.config ({// den Ort der Modulpfade deklarieren: {"jQuery": "libs/jQuery" "Login": "libs/login"} // oder verwenden Sie BaseUrl, um den Pfad aller Module Baseurl anzugeben: "js/libs"}); // Verwenden Sie das Laden des Moduls. Der erste Parameter ist ein Array, dh, das zu geladene Modul wird in der Reihenfolge des Arrays geladen. Die zweite ist eine Rückruffunktion, die nach Abschluss aller Belastungen ausgeführt wird. fordern (['jQuery', 'login'], function ($, login) {alert ("jQuery- und Anmeldemodul laden Erfolg!"); login.do_login (); // einige sonst});Anmeldemoduldefinition im Einklang mit AMD
// Definition Definition von jQuery (['JQuery'], Funktion ($) {// Einige Definitionen Funktion do_login () {$ .post ('/sessions/create', {uname: $ ("#uname"). Val (), Passwort: $ ("#Passwort"). }); // Definition Definition anderer Module (function () {// einige Definitionen return {xx: xx};});Rails wendet keinen JS -Lader an. Einerseits verpackt die neue Version von Rails Asset Pipe alle JS -Dateien in eine JS -Datei, ohne dass mehrere JS -Ladestatus. Andererseits verwendet Turbrolink die sogenannte PJAX-Technologie mit gemischtem Lob und Kritik. Der Standard -Link wird in die AJAX -Methode geändert und erhält nur den BSB -Teil des HTML und der Kopfteil bleibt unverändert, sodass JS -Ladevorgänge nur dann durchgeführt werden, wenn die Website zum ersten Mal geöffnet wird.
Fall 1: Laden von JavaScript -Dateien
<script src = "./ js/required.js"> </script> <script> require (["./ JS/A.JS", "./js/b.js"], function () {myFunctiona (); myfunctionB ();}); </script>Der String -Array -Parameter in der Erforderungsmethode kann unterschiedliche Werte ermöglichen. Wenn die Zeichenfolge mit ".js" endet oder mit "/" beginnt oder eine URL ist, ist erforderlich, dass der Benutzer eine JavaScript -Datei direkt lädt. Wenn die Zeichenfolge "My/Modul" ähnlich ist, wird der Ansicht, dass es sich um ein Modul handelt, und lädt die JavaScript -Datei, in der sich das entsprechende Modul mit den vom Benutzer konfigurierten Basisträger und Pfaden befindet. Der Konfigurationsabschnitt wird später ausführlich beschrieben.
Hier sollte darauf hingewiesen werden, dass fordertJS standardmäßig nicht garantiert, dass MyFunctiona und myFunctionB nach dem Laden der Seite ausgeführt werden müssen. Wenn sichergestellt werden muss, dass das Skript nach dem Laden der Seite ausgeführt wird, bietet RequestJS ein unabhängiges Domready -Modul. Sie müssen dieses Modul von der offiziellen Website von RequiredJS herunterladen, die in Anforderungswesen nicht enthalten ist. Mit dem Domready -Modul ist der Code in Fall 1 nur geringfügig geändert und die Abhängigkeit von Domready.
Fall 2: Führen Sie JavaScript aus, nachdem die Seite geladen wurde
<script src = "./ js/required.js"> </script> <script> require (["domready!", "./js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionB ();}); </script>Nachdem Sie den Code von Fall 2 über Firebug ausgeführt haben, können Sie feststellen, dass RefordeJs ein <skript> -Tag auf die aktuelle Seite als A.JS bzw. B.Js einfügt, um ein <skript> -Tag für das Herunterladen von JavaScript -Dateien asynchron zu deklarieren. Das Async -Attribut wird derzeit von den meisten Browsern unterstützt, was darauf hinweist, dass die JS -Datei in diesem <Script> Tag den Download anderer Seiteninhalte nicht blockiert.
Fall 3: <Skript> Eingefügt von Anforderungjs
<script type = "text/javaScript" charset = "utf-8" async = "" data-requirecontext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
Verwenden Sie Anforderungen, um JavaScript -Module zu definieren
Was sich von dem herkömmlichen JavaScript -Code unterscheidet, ist, dass er keinen Zugriff auf globale Variablen erfordert. Das modulare Design ermöglicht es JavaScript -Code, diese "globalen Variablen" als Parameter durch Abhängigkeiten zu übergeben, wenn er auf "globale Variablen" zugreifen muss, und den Zugriff auf oder deklarierende globale Variablen oder Funktionen in der Implementierung zu vermeiden, wodurch eine große Anzahl und komplexer Namespace -Management effektiv vermieden wird.
Wie in der AMD -Spezifikation von CommonJs angegeben, wird das Definieren von JavaScript -Modulen durch die Define -Methode implementiert.
Schauen wir uns zunächst ein einfaches Beispiel an. In diesem Beispiel werden Schülerobjekte im Hauptprogramm erstellt und die Schülerobjekte in die Klasse eingebaut, indem ein Schülermodul und ein Klassenmodul definiert werden.
Fall 4: Studentenmodul, Student.js
define (function () {return {createStudent: function (name, gender) {return {name: name, gender: gender};}};}); });Fall 5: Klassenmodul, class.js
Define (function () {var Allstudents = []; return {classId: "001", Abteilung: "Computer", addtoclass: function (student) {allstudents.push (student);}, getClassSize: function () {return Allstudents.length;}};};});Fall 6: Hauptprogramm
Erforderlich (["JS/Student", "JS/Class"], Funktion (Student, Clz) {Clz.addtoclass (Student.Createstudent ("Jack", "männlich"); Clz.addtocklass (Student.Createstudent ("Rose", "weiblich"); console.log (Clz.Gz.Gz.Gz.GETCLASS ();Das Schülermodul und das Klassenmodul sind beide unabhängige Module. Definieren wir ein neues Modul. Dieses Modul stützt sich auf die Schüler- und Klassenmodule, so dass auch die Logik des Hauptprogrammteils verpackt werden kann.
Fall 7: Manager -Modul, das sich auf Schüler- und Klassenmodule stützt, Manager.js
Define (["js/student", "js/class"], function (student, clz) {return {addNewstudent: function (name, geschlecht) {clz.addtocklass (student.createstudent (name, gender));}Fall 8: neues Hauptprogramm
fordern (["JS/Manager"], Funktion (Manager) {Manager.AddNewstudent ("Jack", "männlich");Im obigen Code -Beispiel haben wir klar verstanden, wie man ein Modul schreibt, wie dieses Modul verwendet wird und wie die Abhängigkeiten zwischen Modulen definiert werden. Es gibt noch einige Tipps zu verwenden:
Versuchen Sie, die ID des Moduls nicht anzugeben. Wie in der AMD -Spezifikation angegeben, ist diese ID eine Option. Wenn die Migrationsfähigkeit des Moduls bei der Implementierung von Anforderungswechsel betroffen ist, wird die Änderungen der Dateisposition bewirkt, dass die ID manuell geändert wird.
Jede JavaScript -Datei definiert nur ein Modul. Der Suchalgorithmus für den Modulnamen und den Dateipfad bestimmt, dass diese Methode optimal ist. Mehrere Module und Dateien werden vom Optimierer optimiert. Vermeiden Sie kreisförmige Abhängigkeiten von Modulen. Wenn es wirklich unmöglich zu vermeiden ist, können Sie dem Modul Abhängigkeiten zu "Erforderlichen" Modulen hinzufügen und diese direkt im Code verwenden.
erfordern ("DependentyModulenName")Konfigurieren Sie Anforderungen:
In der vorherigen Einführung scheinen wir eine grundlegende Frage übersehen zu haben: Wie stammt aus dem Modulnamen? Wenn ich ein Modul benötige, wie bringt dieses Modul in eine bestimmte JavaScript -Datei auf? Dies beinhaltet die Konfiguration von Anforderungen.
Der einfachste Weg zum Laden von Forderung ist in Fall 2 angezeigt. In diesem Fall geben wir keine BasisaRl und Pfade für Anforderungen an. Wenn die in Fall 10 angezeigte Methode in Data-Main A /js/main.js im Ordner parallel zum aktuellen Index.html-Verzeichnis als Programmeintritt angibt, wird das Verzeichnis /JS-Verzeichnis auch als Basisurl verwendet, wenn Sie andere Module definieren.
Fall 9: Ladeanforderung.js
<script data-main = "js/main" src = "scripts/required.js"> </script>
Daher können alle Modulabhängigkeiten in unseren vorherigen Beispielen aus "JS/" und "Schüler", "Klasse", "Manager" usw. entfernt werden. Eine direktere Möglichkeit, die angegebenen BasisaRl und Pfade anzuzeigen, besteht darin, fordert.config zu verwenden, um diese Parameter festzulegen. Wie in Fall zehn gezeigt.
Fall 10. Konfigurieren von AnforderungenJs
<script type = "text/javaScript" src = "./ js/required.js"> </script> <script type = "text/javaScript"> fordern.config ({Basisurl: "./js", Pfade: {"Einige" einige "einige/v1"}, WaitSeconds: 10}); erfordern (["einige/modul", "my/modul", "./js/a.js"], function (somemodule, mymodule) {}); </script>BaseURL zeigt die Basis -URL aller Module an. Das von "my/modul" geladene Skript ist beispielsweise tatsächlich /js/my/module.js. Beachten Sie, dass Dateien, die in .JS enden, die BasisaRl beim Laden nicht verwenden. Sie verwenden weiterhin den relativen Pfad, auf dem sich der aktuelle Index.html befindet, sodass Sie immer noch hinzufügen müssen "./js/". Wenn BaseURL nicht angegeben ist, wird der in der Datenmain angegebene Pfad verwendet.
Der in den Pfaden definierte Pfad wird verwendet, um den Pfad im Modul zu ersetzen, wie z. B. einige/Modul im obigen Beispiel. Der spezifische JavaScript -Dateipfad ist /js/some/v1/module.js. WaitSeconds gibt an, wie lange es dauert, eine JavaScript -Datei zu laden. Die Standardeinstellung beträgt 7 Sekunden, ohne dass der Benutzer ihn angibt.
Eine weitere wichtige Konfiguration sind Pakete, in denen andere Verzeichnisstrukturen angegeben werden können, die der CommonJS -AMD -Spezifikation entsprechen und so eine umfangreiche Skalierbarkeit bringen. Module wie Dojo, JQuery usw. können auch durch diese Konfiguration durch RequestJS geladen werden.
Weitere konfigurierbare Optionen sind Gebietsschema, Kontext, DEPs, Rückrufe usw. Interessierte Leser können die relevanten Dokumente auf der offiziellen Website von RequiresJs überprüfen.