Heim > Artikel > Web-Frontend > Erster Kontakt mit dem modularen Tool JS require.js

Erster Kontakt mit dem modularen Tool JS require.js

高洛峰Original: 2016-12-28 14:22:521366Durchsuche

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>

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. 45a2772a6b6107b401db3c9b82c049c2body54bdf357c58b8a65c66d7c19c8e4d114 Wenn Sie auf „OK“ klicken, wird angezeigt. Dies ist das Ergebnis der Blockierung des Browser-Renderings durch JS.

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

So schreiben Sie requirejs

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

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Analyse der UI-Router- und NG-Grid-Module in AngularJSNächster Artikel：Eine kurze Analyse der UI-Router- und NG-Grid-Module in AngularJS

In Verbindung stehende Artikel

Mehr sehen