Der erste Kontakt mit JS erfordert.js modulare Tool_Javascript-Kenntnisse-js-Tutorial-php.cn

Der erste Kontakt mit JS erfordert.js modulare Tool_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:04:59

Original

1615 Leute haben es durchsucht

Da die Funktionen der Website allmählich umfangreicher werden, wird das JS auf der Webseite immer komplexer und aufgeblähter. Die ursprüngliche Methode, JS-Dateien einzeln über Skript-Tags zu importieren, kann dem aktuellen Internet-Entwicklungsmodell nicht mehr gerecht werden. Wir brauchen ein Team Eine Reihe komplexer Anforderungen wie Zusammenarbeit, Wiederverwendung von Modulen, Unit-Tests usw.

RequireJS ist ein sehr kleines Framework zum Laden von JavaScript-Modulen und einer der besten Implementierer der AMD-Spezifikation. Die neueste Version von RequireJS ist nur 14 KB komprimiert, was sehr leichtgewichtig ist. Es kann auch mit anderen Frameworks funktionieren. Durch die Verwendung von RequireJS wird die Qualität Ihres Front-End-Codes definitiv verbessert.

Welche Vorteile bringt requirejs?

Offizielle Beschreibung der Anforderungen:

　RequireJS ist ein JavaScript-Datei- und Modullader. Er ist für die Verwendung im Browser optimiert, kann aber auch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden Ihr Code.

Ungefähre Bedeutung:

Es kann als Modullader für JS-Dateien im Browser verwendet werden und kann auch in Node- und Rhino-Umgebungen verwendet werden, Balabala ... In diesem Absatz wird die Grundfunktion von requirejs „modulares Laden“ beschrieben. Wir werden sie in den folgenden Kapiteln einzeln erklären

Schauen wir uns zunächst ein häufiges Szenario an und erklären anhand von Beispielen, wie requirejs verwendet werden.

Normale Schreibweise
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Nach dem Login kopieren

a.js:

function fun1(){
 alert("it works");
}
 
fun1();

Nach dem Login kopieren

Vielleicht schreiben Sie es lieber so

(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})()

Nach dem Login kopieren

Die zweite Methode verwendet den Blockbereich, um eine Kontamination globaler Variablen zu verhindern. Beim Ausführen der beiden oben genannten Beispiele weiß ich nicht, ob Sie das beim Ausführen der Warnung bemerkt haben Der Inhalt ist leer, d. h. body wird erst angezeigt, nachdem auf OK geklickt wurde.

erfordert die Schreibmethode

Natürlich müssen Sie zuerst auf die Requirejs-Website gehen, um js herunterzuladen -> requirejs.rog
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Nach dem Login kopieren

a.js:

define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})

Nach dem Login kopieren

Der Browser meldet „es funktioniert“, was darauf hinweist, dass er ordnungsgemäß ausgeführt wird. Diesmal ist der Browser jedoch nicht leer. Bisher können wir erkennen, dass „requirejs“ vorhanden ist folgende Vorteile:

1. Verhindern Sie, dass das Laden von js das Rendern von Seiten blockiert
2. Verwenden Sie Programmaufrufe, um js zu laden, um die folgenden hässlichen Szenen zu verhindern

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, um das modulare Tool require.js zu verstehen.