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