Heim > Artikel > Web-Frontend > Verwenden von RequireJS zum Implementieren von Lazy Loading in JavaScript-Anwendungen_Basics

Verwenden von RequireJS zum Implementieren von Lazy Loading in JavaScript-Anwendungen_Basics

WBOYOriginal: 2016-05-16 15:52:011056Durchsuche

Ob einfach oder komplex, Webanwendungen bestehen aus einigen HTML-, JavaScript- und CSS-Dateien. Normalerweise verwenden Entwickler JavaScript-Frameworks von Drittanbietern wie JQuery, Knockout, Underscore usw., um die Entwicklungsgeschwindigkeit zu verbessern. Da diese JavaScript-Frameworks für bestimmte Zwecke entwickelt und „bewährt“ wurden, ist es sinnvoller, sie direkt zu verwenden, als die erforderlichen Funktionen von Grund auf zu implementieren. Da jedoch die Komplexität von Anwendungen immer weiter zunimmt, wird es immer wichtiger, sauberen, kopplungsarmen und wartbaren Code zu schreiben. In diesem Artikel erkläre ich, wie das RequireJS-Framework Anwendungsentwicklern hilft, modulareren Code zu schreiben und wie es die Anwendungsleistung durch verzögertes Laden von JavaScript-Dateien verbessert.

Wir werden am Anfang nicht das RequireJS-Framework verwenden und es dann im nächsten Kapitel mit RequireJS rekonstruieren.

Die folgende HTML-Seite enthält ein e388a4556c0f65e1904146cc1a846bee-Element mit der ID „message“. Wenn der Benutzer diese Seite besucht, werden die Bestell-ID und die Informationen zum Kundennamen angezeigt.

Die Common.JS-Datei enthält die Definitionen von zwei Modulen – Bestellung und Kunde. Die Funktion showData wird mit dem Hauptteil der Seite kombiniert. Sie fügt die auszugebenden Informationen in die Seite ein, indem sie die Funktion write aufruft. Als Beispiel habe ich in der showData-Funktion die ID fest auf 1 und den Kundennamen auf Prasad fest codiert.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript NonRequireJS</title>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<strong>Display data without RequireJS</strong>
<p id="message" />
<script type="text/javascript">
showData();
</script>
</body>
</html>
Common.JS
 
function write(message) {
  document.getElementById('message').innerHTML += message + '</br>';
}
 
function showData() {
  var o = new Order(1, "Prasad");
  write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
 
function Customer(name) {
  this.name = name;
  return this;
}
 
function Order(id, customerName) {
  this.id = id;
  this.customer = new Customer(customerName);
  return this;
}

Öffnen Sie diese Seite in Ihrem Browser. Sie sehen die folgenden Informationen.

201571120734678.png (300×172)

Obwohl der obige Code die Ausgabe anzeigen kann, gibt es dennoch einige Probleme:

Die Common.JS-Datei enthält alle Funktionen, die definiert werden müssen (Schreiben, Daten anzeigen), und die Module (Bestellung, Kunde) sind schwer zu warten und wiederzuverwenden. Wenn Sie die Schreibfunktion auf anderen Seiten wiederverwenden und auf die obige JavaScript-Datei verweisen möchten, haben Sie auch andere Funktionen und Module importiert, die für diese Seite möglicherweise nicht benötigt werden.
Das Order-Modul (oder „Klasse“ im objektorientierten Sinne) erstellt während des Initialisierungsprozesses eine Instanz des Customer-Moduls. Das bedeutet, dass das Bestellmodul vom Kundenmodul abhängig ist. Die enge Kopplung zwischen diesen Modulen erschwert die Umgestaltung und Wartung bei zukünftigen Optimierungen.
Immer wenn der Client diese Seite anfordert, wird die Common.JS-Datei in das DOM geladen. Obwohl wir im obigen Beispiel nur Informationen auf der Seite ausgeben müssen, laden wir dennoch die unnötigen Module (Kunde, Bestellung) in den Speicher. Das Laden unnötiger Anwendungsressourcen (JavaScript, CSS, Bilddateien usw.) kann die Anwendungsleistung beeinträchtigen.
Die Module in der Common.JS-Datei können in verschiedene JavaScript-Dateien unterteilt werden. Wenn die Anwendung jedoch immer komplexer wird, ist es schwierig, die Abhängigkeiten zwischen JavaScript-Dateien und die Ladereihenfolge der zu ladenden Dateien zu beurteilen . .

Das RequireJS-Framework verarbeitet Abhängigkeiten zwischen JavaScript-Dateien und lädt sie nach Bedarf nacheinander.

Anwendungen mit RequireJS erstellen

Schauen wir uns nun den überarbeiteten Code an. Der folgende HTML-Code verweist auf die Datei Require.JS. Das data-main-Attribut definiert den einzigen Einstiegspunkt für diese Seite. Im folgenden Szenario wird RequireJS angewiesen, Main.js beim Start zu laden.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript RequireJS</title>
<script src="Require.Js" type="text/javascript" data-main="Main.js"></script>
</head>
<body>
<strong>Display data using RequireJS</strong>
<p id="message" />
</body>
</html>

Main.JS

Da diese Datei über das data-main-Attribut angegeben wurde, lädt RequireJS sie so schnell wie möglich. Diese Datei nutzt Funktionen des RequireJS-Frameworks, um Abhängigkeiten zu anderen JavaScript-Dateien zu ermitteln und zu definieren. Im folgenden Codeausschnitt stellt der erste Parameter die Abhängigkeit dar (abhängig von der Order.JS-Datei) und der zweite Parameter ist eine Rückruffunktion. RequireJS analysiert alle Abhängigkeiten, lädt sie und führt dann diese Rückruffunktion aus. Bitte beachten Sie, dass der Wert des ersten Parameters (Order) mit dem Dateinamen (Order.JS) übereinstimmen muss.

require(["Order"], function (Order) {
  var o = new Order(1, "Prasad");
  write(o.id + o.customer.name);
});

Order.JS

Das RequireJS-Framework bietet eine einfache Möglichkeit, Abhängigkeiten zwischen JavaScript-Dateien zu definieren und zu verwalten. Die Definitionsfunktion im folgenden Code deklariert, dass Customer.JS geladen werden muss, bevor die Callback-Funktion „Order“ verarbeitet wird.

define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);
Customer.JS

Diese Datei ist nicht von anderen JavaScript-Dateien abhängig, daher ist der Wert des ersten Parameters der Definitionsfunktion ein leeres Array.

define([],
function () {
function Customer(name) {
this.name = name;
}
return Customer;
}
);

Okay, öffnen Sie nun diese Anwendung mit Ihrem Browser und Sie werden die folgende Ausgabe sehen. Beachten Sie, dass RequireJS nur erforderliche JavaScript-Dateien lädt.

201571120754519.png (300×172)

Zusammenfassung

In diesem Artikel analysieren wir, wie das RequireJS-Framework Abhängigkeiten zwischen JavaScript-Dateien verarbeitet und diese nach Bedarf lädt. Es hilft Entwicklern, Code zu schreiben, der lockerer gekoppelt, modularer und wartbarer ist.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse der Methode zum Erhalten des ausgewählten Werts in javascript_javascript-FähigkeitenNächster Artikel：Analyse der Methode zum Erhalten des ausgewählten Werts in javascript_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen