Eine kurze Einführung in RequireJS und seine Verwendung-js-Tutorial-php.cn

Eine kurze Einführung in RequireJS und seine Verwendung

高洛峰

Freigeben： 2016-12-09 15:37:35

Original

1126 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren