So implementieren Sie Lazy Loading in JavaScript-Anwendungen

So implementieren Sie Lazy Loading in JavaScript-Anwendungen_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 15:53:08

Original

1259 Leute haben es durchsucht

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 beginnen ohne das RequireJS-Framework und überarbeiten es dann im nächsten Kapitel mit RequireJS.
Die folgende HTML-Seite enthält ein

-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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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

201562590347564.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 . .

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>

Nach dem Login kopieren

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);
});

Nach dem Login kopieren

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;
}
);

Nach dem Login kopieren

Customer.JS

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

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

201562590435120.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.

Vielen Dank

Quellcode herunterladen: Lazy Loading mit RequireJS (Prasad Honrao, Codetails)