Da die Funktionen von Websites allmählich umfangreicher werden, ist das JavaScript in Webseiten zunehmend komplexer und aufgeblähter geworden. Die ursprüngliche Art, einzelne JS-Dateien über script-Tags einzubinden, kann das aktuelle Internet-Entwicklungsmodell nicht mehr erfüllen; wir brauchen eine Reihe komplexer Anforderungen wie Teamzusammenarbeit, Modulwiederverwendung, Unit-Tests und so weiter.
RequireJS ist ein sehr kompaktes JavaScript-Modulladeframework und einer der besten Implementierer der AMD-Spezifikation. Die neueste Version von RequireJS ist nach der Minifizierung nur 14K groß, was extrem leichtgewichtig ist. Es kann auch mit anderen Frameworks zusammenarbeiten. Die Verwendung von RequireJS wird die Qualität Ihres Frontend-Codes definitiv verbessern.
Welche Vorteile kann requirejs bringen
Offizielle Beschreibung von requirejs:
RequireJS ist ein JavaScript-Datei- und Modul-Loader. Es ist für die Verwendung im Browser optimiert, kann aber auch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. Die Verwendung eines modularen Skript-Loaders wie RequireJS verbessert die Geschwindigkeit und Qualität Ihres Codes.
Ungefähre Bedeutung:
Im Browser kann es als Modul-Loader für JS-Dateien dienen, und es kann auch in Node- und Rhino-Umgebungen verwendet werden, blabla... Dieser Abschnitt beschreibt die grundlegende Funktion von requirejs – „modulares Laden“. Was ist modulares Laden? Wir werden es in den folgenden Abschnitten einzeln erklären.
Schauen wir uns zunächst ein häufiges Szenario an und erklären anhand von Beispielen, wie man requirejs verwendet.
Die normale Schreibweise
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js.html"></script>
</head>
<body>
<span>body</span>
</body>
</html>
a.js:
function fun1(){
alert("it works");
}
fun1();
Vielleicht schreiben Sie es lieber so
(function(){
function fun1(){
alert("it works");
}
fun1();
})()
Die zweite Methode verwendet Block-Scope, um Funktionen zu deklarieren und so zu verhindern, dass globale Variablen verschmutzt werden, aber das Wesentliche ist immer noch dasselbe. Ist Ihnen beim Ausführen der beiden obigen Beispiele aufgefallen, dass beim Ausführen von alert der HTML-Inhalt leer ist, das heißt,<span>body</span>er wird nicht angezeigt; er erscheint erst nach dem Klick auf OK. Dies istdie Blockierung des Browser-Renderings durch JS,der daraus resultierende Effekt.
Die requirejs-Schreibweise
Natürlich müssen Sie zuerst zur requirejs-Website gehen, um das JS herunterzuladen ->requirejs.org
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js.html"></script>
<script type="text/javascript">
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html>
a.js:
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
Der Browser meldet "es funktioniert", was zeigt, dass die Operation korrekt ist, aber es gibt einen Unterschied: Diesmal ist der Browser nicht leer; der body ist bereits auf der Seite erschienen. Bisher können wir erkennen, dass requirejs folgende Vorteile hat:
- Verhindern, dass das Laden von JS das Rendern der Seite blockiert
- Programmatische Aufrufe zum Laden von JS verwenden, wodurch hässliche Szenarien wie die folgenden vermieden werden
<script type="text/javascript" src="a.js.html"></script> <script type="text/javascript" src="b.js.html"></script> <script type="text/javascript" src="c.js.html"></script> <script type="text/javascript" src="d.js.html"></script> <script type="text/javascript" src="e.js.html"></script> <script type="text/javascript" src="f.js.html"></script> <script type="text/javascript" src="g.js.html"></script> <script type="text/javascript" src="h.js.html"></script> <script type="text/javascript" src="i.js.html"></script> <script type="text/javascript" src="j.js.html"></script>
Die genaue Bedeutung des Codes und weitere Funktionen werden in späteren Abschnitten erklärt:JS-Modularisierungstool requirejs-Tutorial (Teil 2): Grundlagen
Artikelquelle: https://github.com/liuxey/blog/issues/1