So verwenden Sie RequireJS zur Optimierung des JavaScript-Referenzcodes_Grundkenntnisse

RequireJS ist eine effektive Möglichkeit, die Geschwindigkeit und Qualität Ihres Javascript-Codes zu verbessern und gleichzeitig die Lesbarkeit und Wartung Ihres Codes zu erleichtern.

In diesem Artikel stelle ich Ihnen RequireJS vor und wie Sie es verwenden sollten. Wir besprechen den Import von Dateien und die Definition von Modulen und gehen sogar auf Optimierungsaspekte ein.

Einfach ausgedrückt ist require.js ein Skript-Loader, der es Ihnen ermöglicht, Ihren JavaScript-Code in Dateien und Module zu unterteilen und gleichzeitig die Abhängigkeiten zwischen den einzelnen Modulen zu verwalten.

Dateien importieren

Bevor wir RequireJS verwenden können, müssen wir die Bibliothek und die AMD-Datei (Asynchronous Module Definition) herunterladen. Dann verlinken Sie auf die Datei require.js am Kopf des Dokuments, etwa:

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

Sie fragen sich vielleicht, was das Attribut „data-main“ ist. Wenn Sie „require“ am Anfang des Dokuments aufrufen, verlinken Sie auch auf die Hauptdatei Ihrer Javascript-Anwendung, die in diesem Beispiel „main“ ist. js (bitte beachten Sie, dass RequireJS automatisch das Suffix .js am Ende des Dateinamens hinzufügt)

In der Datei main.js müssen Sie RequireJS konfigurieren, das Modul laden und einen Basispfad für die Verwendung beim Importieren von Dateien definieren.

Funktion erforderlich

RequireJS verwendet eine einfache Require-Funktion zum Importieren von Skripten. In diesem Beispiel importiert RequireJS JQuery:

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

Einer der Vorteile von RequireJS ist, dass es sehr einfach zu lesen ist. Im obigen Code können wir sehen, dass die Anforderungsfunktion zuerst die Datei mit dem Namen jquery.js abruft und dann $ als Parameter an eine anonyme Funktion übergibt. Wenn diese Aktion abgeschlossen ist, können Sie den JQuery-Code nach Belieben verwenden.

Jetzt enthält Ihr Code im Allgemeinen nicht die jQuery-Bibliothek der Datei jquery.js. Wie die meisten Plug-Ins und Frameworks entscheiden wir uns normalerweise dafür, sie von GitHub oder Google CDN zu importieren, daher müssen wir sie konfigurieren :

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

Das bedeutet, dass Sie jquery über Google importieren können (bitte beachten Sie, dass ich in diesem Beispiel den Namen „jquery“ verwendet habe; Sie können jeden beliebigen Namen verwenden)

Modul definieren

Die Verwendung des AMD-Modus bedeutet, dass unser Code in Module strukturiert werden kann; diese Module implementieren bestimmte Funktionen in der Anwendung. Sie können nur zwei Codezeilen in ein Modul einfügen oder 100 Codezeilen, es hängt alles davon ab, was Sie mit dem Modul erreichen möchten.

Um ein Modul zu definieren, können wir schreiben:

define(function () {
 function add (x,y) {
  return x + y;
 }
});

Hier habe ich eine Funktion zum Hinzufügen ohne Abhängigkeiten definiert. Wenn diese Funktion jedoch JQuery benötigt, um ordnungsgemäß zu funktionieren, könnte der Definitionscode so aussehen:

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

Mit dieser Syntax weisen wir JavaScript an, zuerst JQuery zu importieren und dann den Code auszuführen, sodass JQuery jederzeit verwendet werden kann. Wir können auch in Javascript-Dateien definierte Module verwenden, nicht nur Frameworks oder Plugins.

Optimierung

Wie Sie sehen, ist RequireJS ein leistungsstarkes Tool zum Organisieren Ihrer Dateien in Modulen und zum Importieren dieser nur dann, wenn Sie sie benötigen. Der Nachteil besteht darin, dass viele JavaScript-Dateien auch viel Importzeit erfordern. Daher enthält RequireJS einen Optimierer, der die Daten aller Dateien sammelt und in einer komprimierten Datei ablegt.

Insgesamt ist RequireJS ein großartiges Tool zum Organisieren und Optimieren von Javascript in Ihrer Webanwendung.