Beispiel-Tutorial zum Laden von JavaScript-Modulen mithilfe der RequireJS-Bibliothek

Die Standardlademethode von js über Skript-Tags ist synchron, das heißt, nachdem die js im ersten Skript-Tag geladen wurden, beginnt das Laden des zweiten und so weiter, bis alle js-Dateien geladen sind. Und die Abhängigkeit von js muss durch die Reihenfolge des Skripts sichergestellt werden. Während des Ladens von js reagiert der Browser stark, was sich stark auf die Benutzererfahrung auswirkt. Auf dieser Grundlage sind viele Lösungen für das Laden und Entladen von js aufgetaucht sie eins.

Bei den von requirejs geladenen Modulen handelt es sich im Allgemeinen um Module, die den AMD-Standards entsprechen, d Diesmal ist es schwieriger.

Das Laden von js main erfordert die folgenden Aspekte:

Das Attribut „data-main“ des Skript-Tags deklariert das von requirejs, async="true" (non-ie) und defer(ie) geladene Eingabemodul. Tags weisen auf asynchrone Last hin.

Der Pfad, der dem Konfigurationsmodul „require.config“ entspricht

Erfordert Deklaration von Abhängigkeiten

HTML-Demo

<script src ="js/require.js" defer async="true" data-main="js/main" >
 
<!--给出requirejs路径，声明为异步加载，指定入口模块为
 
main.js（可省略.js）-->

main.js

require.config({
  //声明模块的位置
  paths: {
    "jquery":"libs/jquery"
    "login" : "libs/login"
  }
  //或使用baseUrl指定所有模块的路径
  baseUrl: "js/libs"
});
//使用require加载模块，第一个参数为数组，即要加载的模块，将按数组顺序加载；第二个为回调函数，在全部加载完成后执行。
require(['jquery','login'],function($,Login){
  alert("jquery and login module load success!");
  Login.do_login();
  //some else
});

Entspricht der AMD-Anmeldemoduldefinition

//依赖jquery的定义
 define(['jquery'],function($){
   // some definations
  function do_login(){
    $.post('/sessions/create',{uname:$("#uname").val(),
         password:$("#password").val()},function(data){
     //some 
   });
   return {do_login:do_login};
  } 
 });
 
//不依赖其他模块的定义
define(function(){
 //some definations
 return {xx:xx};
});

Rails wendet keinen JS-Loader an. Einerseits packt die neue Version der Asset-Pipe von Rails alle JS-Dateien in eine JS-Datei. Ohne mehrere Der Status von js wird geladen. Turbolink verwendet dagegen die sogenannte Pjax-Technologie. Der Standardlink wird in den Ajax-Modus geändert bleibt unverändert, sodass das Laden von js nur beim ersten Öffnen der Website erfolgt.

Fall 1: JavaScript-Datei laden

<script src="./js/require.js"></script> 
  <script> 
 require(["./js/a.js", "./js/b.js"], function() { 
      myFunctionA(); 
      myFunctionB(); 
   }); 
  </script>

Der String-Array-Parameter in der Require-Methode kann unterschiedliche Werte zulassen. Wenn der String mit „.js“ endet, beginnt entweder mit „/“ oder eine URL ist, geht RequireJS davon aus, dass der Benutzer eine JavaScript-Datei direkt lädt. Wenn die Zeichenfolge andernfalls „my/module“ ähnelt, geht es davon aus, dass es sich um ein Modul handelt, und verwendet das vom Benutzer konfigurierte baseUrl und Pfade zum Laden der JavaScript-Datei, in der sich das entsprechende Modul befindet. Der Konfigurationsteil wird später ausführlich vorgestellt.

Hier ist darauf hinzuweisen, dass RequireJS nicht garantiert, dass myFunctionA und myFunctionB standardmäßig ausgeführt werden müssen, nachdem die Seite geladen wurde. RequireJS bietet ein unabhängiges domReady-Modul. Sie müssen zur offiziellen Website von RequireJS gehen, um dieses Modul herunterzuladen. Es ist nicht in RequireJS enthalten. Mit dem domReady-Modul kann der Code in Fall 1 leicht geändert und mit einer Abhängigkeit von domReady hinzugefügt werden.

Fall 2: Führen Sie JavaScript aus, nachdem die Seite geladen wurde

<script src="./js/require.js"></script> 
  <script> 
 require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
      myFunctionA(); 
      myFunctionB(); 
   }); 
  </script>

Nachdem Sie den Code in Fall 2 ausgeführt haben, können Sie über Firebug sehen, dass RequireJS in a.js und b eingefügt wird Die aktuelle Seite deklariert jeweils ein