Erster Kontakt mit dem modularen Tool JS require.js-js-Tutorial-php.cn

Erster Kontakt mit dem modularen Tool JS require.js

高洛峰

Freigeben： 2016-12-28 14:22:52

Original

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

第一次接触JS require.js模块化工具

RequireJS ist ein sehr kleines JavaScript-Modullade-Framework 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 von requirejs:

　RequireJS ist ein JavaScript-Datei- und Modullader, der für die Verwendung im Browser optimiert ist, dies aber kann kann 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. Als Modul-Loader für JS-Dateien kann er auch in Node- und Rhino-Umgebungen verwendet werden. .. In diesem Absatz wird die Grundfunktion von requirejs „modulares Laden“ beschrieben. Wir werden

auf den folgenden Seiten nacheinander erklären. Schauen wir uns zunächst ein häufiges Szenario an und erklären, wie requirejs

normale Schreibmethode

index.html verwendet wird:

a.js:

Vielleicht schreiben Sie lieber so

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

Nach dem Login kopieren

Die zweite Methode verwendet den Blockbereich, um Funktionen zu deklarieren, um eine Kontamination zu verhindern Das Wesentliche ist immer noch das Gleiche. Ich weiß nicht, ob Ihnen bei der Ausführung der beiden Beispiele aufgefallen ist, dass der HTML-Inhalt leer ist, d. h. body Wenn Sie auf „OK“ klicken, wird angezeigt. Dies ist das Ergebnis der Blockierung des Browser-Renderings durch JS.

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

Nach dem Login kopieren

So schreiben Sie requirejs

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

Nach dem Login kopieren

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

index.html:

a.js:

Der Browser meldet „es funktioniert“, was darauf hinweist, dass der Vorgang korrekt ist, aber es gibt einen Unterschied. Diesmal ist der Browser nicht leer, der Text ist im angezeigt Seite, soweit wir wissen, dass requirejs die folgenden Vorteile hat:

<!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

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

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

Nach dem Login kopieren

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

Weitere Artikel zum ersten Mal im Zusammenhang mit dem modularen JS-Tool require.js finden Sie auf der chinesischen PHP-Website!