Ausführliche Erklärung zur Verwendung von RequireJs

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung zur Verwendung von RequireJs. Wir wissen, dass RequireJs sehr leistungsfähig ist. Analysieren Sie es.

Laden Sie zuerst die JavaScript-Datei

Das Ziel von RequireJS besteht darin, die Modularisierung von Code zu fördern, der ein anderes Tag als das herkömmliche < verwendet ;script> Schritte zum Laden des Skripts. Sie können es verwenden, um Code zu beschleunigen und zu optimieren, aber sein Hauptzweck besteht darin, den Code zu modularisieren.

RequireJS lädt den gesamten Code an einer Adresse relativ zu baseUrl. Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag der obersten Ebene der Seite enthält ein spezielles Attribut data-main, das von require.js verwendet wird, um den Skriptladevorgang zu starten, und baseUrl wird im Allgemeinen auf das Verzeichnis festgelegt, das mit diesem Attribut übereinstimmt.

baseUrl kann auch über RequireJS übergeben werden config wird manuell eingestellt. Wenn config und data-main nicht explizit angegeben werden, ist die standardmäßige baseUrl das Verzeichnis, zu dem die HTML-Seite gehört, die RequireJS enthält.

RequireJS geht standardmäßig davon aus, dass alle abhängigen Ressourcen JS-Skripte sind, sodass das Suffix „.js“ nicht zur Modul-ID hinzugefügt werden muss. RequireJS verwaltet das Modul Das Suffix wird beim Parsen der ID automatisch zum Pfad hinzugefügt. Sie können eine Reihe von Skripten über die Pfadkonfiguration festlegen, was uns dabei hilft, bei der Verwendung von Skripten weniger Wörter zu programmieren.

Manchmal möchten Sie den Analyseprozess „baseUrl + Pfade“ vermeiden und direkt angeben, dass ein Skript in ein bestimmtes Verzeichnis geladen werden soll. Sie können dies zu diesem Zeitpunkt tun: wenn ein Modul Wenn die ID mit einer der folgenden Regeln übereinstimmt, wird bei der ID-Analyse die reguläre Konfiguration „baseUrl + paths“ vermieden und sie stattdessen direkt als Skript relativ zum aktuellen HTML-Dokument geladen:

Beenden Sie mit „.js“.
Beginnen Sie mit „/“.
Fügen Sie URL-Protokolle wie „http:“ oder „https:“ ein.

Im Allgemeinen ist es am besten, baseUrl zu verwenden und „paths“ config, um die Modul-ID festzulegen. Dadurch erhalten Sie zusätzliche Flexibilität, z. B. einfaches Umbenennen, Verschieben von Skripten usw. Um unübersichtliche Konfigurationen zu vermeiden, ist es gleichzeitig am besten, keine mehrstufigen verschachtelten Verzeichnishierarchien zum Organisieren von Code zu verwenden. Platzieren Sie stattdessen alle Skripte entweder in baseUrl oder trennen Sie sie in einer flachen Struktur für Projektbibliotheken/Drittanbieter , wie folgt:

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

<script data-main="js/app.js" src="js/require.js"></script>

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

Beachten Sie, dass es sich im Beispiel um Drittanbieter handelt Bibliotheken wie jQuery enthalten keine Versionsnummern in ihren Dateinamen. Wir empfehlen, Versionsinformationen in einer separaten Datei zu verfolgen. Mit Tools wie Volo können Sie Versionsinformationen zu package.json hinzufügen und den Dateinamen auf der Festplatte als „jquery.js“ belassen. Dies hilft Ihnen, Ihre Konfiguration minimal zu halten und zu vermeiden, dass Sie für jede Bibliotheksversion einen Pfad festlegen müssen. Konfigurieren Sie beispielsweise „jquery“ auf „jquery-1.7.2“.

Im Idealfall ist jedes geladene Skript ein durch define() definiertes Modul, aber einige traditionelle/ältere Bibliotheken vom Typ „Browser-Global-Variable-Injection“ werden nicht mit define() definiert, ihre Abhängigkeiten müssen Sie verwenden Shim dafür config, um ihre Abhängigkeiten anzugeben. Wenn Sie keine Abhängigkeiten angeben, wird beim Laden möglicherweise ein Fehler gemeldet. Dies liegt daran, dass RequireJS diese Bibliotheken aus Geschwindigkeitsgründen asynchron und außerhalb der Reihenfolge lädt.

require.js prüft beim Laden das Attribut data-main:

Es wäre sehr nützlich, wenn Sie das HTML-Tag verwenden könnten, anstatt das DOM basierend darauf zu manipulieren Skripte zum Erstellen von HTML. Es gibt jedoch keine gute Möglichkeit, HTML in JavaScript-Dateien einzubetten. Sie können lediglich HTML-Strings in js verwenden, dies ist jedoch im Allgemeinen schwierig beizubehalten, insbesondere bei mehrzeiligem HTML. .

RequireJS verfügt über ein text.js-Plug-in, das bei der Lösung dieses Problems helfen kann. Wenn eine Abhängigkeit das Präfix text! verwendet, wird sie automatisch geladen. Siehe die README-Datei von text.js.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Erklärungen und Beispiele für boolesche Werte, relationale Operatoren und logische Operatoren in JS

Ausführlich Erklärung und Beispiele der einzelnen Funktionen von jQuery

So implementieren Sie AJAX und JSONP in nativem JS

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von RequireJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!