Heim > Artikel > Web-Frontend > Eine kurze Einführung in RequireJS und seine Verwendung

Eine kurze Einführung in RequireJS und seine Verwendung

高洛峰Original: 2016-12-09 15:37:351098Durchsuche

Einführung in RequireJS

RequireJS ist ein JavaScript-Modullader. Es eignet sich hervorragend für die Verwendung im Browser. Die Verwendung von RequireJS zum Laden modularer Skripte verbessert die Ladegeschwindigkeit und Qualität Ihres Codes.

Kompatibilität

Eine kurze Einführung in RequireJS und seine Verwendung

Vorteile

Erzielen Sie ein asynchrones Laden von JS-Dateien, um den Verlust der Webseitenantwort zu vermeiden

Verwaltungsmodul Abhängigkeiten untereinander erleichtern das Schreiben und Warten von Code

Schnell loslegen

Schritt 1

require.js einführen

Die Abhängigkeiten in require() sind An Array, auch wenn nur eine Abhängigkeit vorhanden ist, müssen Sie zum Definieren ein Array verwenden

Der zweite Parameter ist die Rückruffunktion (Callback), mit der Abhängigkeiten zwischen Modulen aufgelöst werden können

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require(["js/a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

Schritt 2

require.config wird zum Konfigurieren des Modulladeorts verwendet

Wenn der feste Speicherort relativ lang ist, können Sie ihn verwenden baseUrl: „js“, dann ist es nicht nötig, js in Pfade zu schreiben

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"       
        }
      });
 
      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

Schritt 3

Die require.config-Konfiguration erscheint wiederholt in Schritt 2. Wenn zu jeder Seite eine Konfiguration hinzugefügt wird, ist dies nicht möglich. requirejs bietet eine Funktion namens „Master Data“

Erstellen Sie eine main.js und fügen Sie die require.config in Schritt 2 ein main.js Medium

<script data-main="js/main" src="js/require.js"></script>

Schritt 4

Module, die über require geladen werden, müssen im Allgemeinen den AMD-Spezifikationen entsprechen, d. h. die Definition verwenden um das Modul zu deklarieren, aber manchmal müssen Sie Nicht-AMD-Standard-JS laden, dann müssen Sie eine andere Funktion verwenden: shim

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
});
require(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
});

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：Implementierungsmethode zum dynamischen Hinzufügen von Klassen in JavascriptNächster Artikel：Implementierungsmethode zum dynamischen Hinzufügen von Klassen in Javascript

In Verbindung stehende Artikel

Mehr sehen