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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag, das zum asynchronen Herunterladen von JavaScript-Dateien verwendet wird. Das async-Attribut wird derzeit von den meisten Browsern unterstützt, was bedeutet, dass die js-Datei im 27835793f4768f4164d1421d99e293bc-Tag den Download anderer Seiteninhalte nicht blockiert.

Fall 3: RequireJS eingefügtes 3f1c4e4b6b16bbbd69b2ee476dc4f83a

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_"
data-requiremodule="js/a.js" src="js/a.js"></script>

Verwenden Sie RequireJS, um das JavaScript-Modul zu definieren

Das JavaScript-Modul unterscheidet sich hier vom herkömmlichen JavaScript-Code. Der Grund dafür ist dass es keinen Zugriff auf globale Variablen erfordert. Der modulare Aufbau ermöglicht es JavaScript-Code, diese „globalen Variablen“ über Abhängigkeiten als Parameter an den Implementierungskörper des Moduls zu übergeben, wenn er auf „globale Variablen“ zugreifen muss, wodurch die Notwendigkeit vermieden wird, in der Implementierung auf globale Variablen zuzugreifen oder diese zu deklarieren Funktionen, wodurch eine große und komplexe Namespace-Verwaltung effektiv vermieden wird.

Wie in der AMD-Spezifikation für CommonJS angegeben, erfolgt die Definition von JavaScript-Modulen über die Methode define.

Sehen wir uns zunächst ein einfaches Beispiel an. Dieses Beispiel erstellt ein Schülerobjekt im Hauptprogramm und fügt das Schülerobjekt in die Klasse ein, indem es ein Schülermodul und ein Klassenmodul definiert.

Fall 4: Studentenmodul, student.js

define(function(){ 
  return { 
   createStudent: function(name, gender){ 
      return { 
        name: name, 
        gender: gender 
      }; 
   } 
  }; 
});

Fall 5: Klassenmodul, class.js

define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

Fall 6: Hauptprogramm

require(["js/student", "js/class"], function(student, clz) { 
clz.addToClass(student.createStudent("Jack", "male")); 
clz.addToClass(student.createStudent("Rose", "female")); 
console.log(clz.getClassSize()); // 输出 2 
});

Das Studentenmodul und das Klassenmodul sind unabhängige Module. Als nächstes definieren wir ein neues Modul. Dieses Modul hängt von den Studenten- und Klassenmodulen ab, sodass auch die Logik des Hauptprogrammteils gepackt werden kann.

Fall 7: Manager-Modul, das auf Schüler- und Klassenmodulen basiert, manager.js

define(["js/student", "js/class"], function(student, clz){ 
 return { 
  addNewStudent: function(name, gender){ 
  clz.addToClass(student.createStudent(name, gender)); 
    }, 
  getMyClassSize: function(){ 
  return clz.getClassSize(); 
  } 
   }; 
 });

Fall 8: Neues Hauptprogramm

require(["js/manager"], function(manager) { 
manager.addNewStudent("Jack", "male"); 
manager.addNewStudent("Rose", "female"); 
console.log(manager.getMyClassSize());// 输出 2 
});

Durch den obigen Code Beispielsweise haben wir klar verstanden, wie man ein Modul schreibt, wie dieses Modul verwendet wird und wie man Abhängigkeiten zwischen Modulen definiert. Es gibt noch einige Nutzungstipps, die beachtet werden müssen:

Versuchen Sie, die Modul-ID nicht anzugeben. Wie in der AMD-Spezifikation angegeben, ist diese ID optional, da sie sich auf die Portabilität des Moduls auswirkt Bei der Implementierung von RequireJS führen Änderungen am Dateispeicherort dazu, dass die ID manuell geändert werden muss.

Jede JavaScript-Datei definiert nur ein Modul. Der Suchalgorithmus für Modulnamen und Dateipfad bestimmt, dass diese Methode optimal ist. Mehrere Module und Dateien werden vom Optimierer optimiert. Vermeiden Sie die zirkuläre Abhängigkeit des Moduls, wenn sie nicht vermieden werden kann, können Sie eine Abhängigkeit vom Modul „require“ im Modul hinzufügen und RequireJS direkt im Code konfigurieren, indem Sie

require(”dependencyModuleName”)

verwenden:

前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在 require 一个模块时，这个模块是如何映射到具体的 JavaScript 文件上去？这就涉及到如何配置 RequireJS。

最简化的加载 RequireJS 的方式如案例2 所示，在这种情况下，我们没有指定一个 baseUrl 和 paths 给 RequireJS，如果通过如案例10 所示方式，则 data-main 指定了一个在当前 index.html 目录并行的文件夹下的 /js/main.js 作为程序入口，而 /js 目录也将作为 baseUrl 在其他模块定义时候使用。

案例九：载入 require.js

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

因此，我们前面示例中的所有模块依赖，都可以去掉”js/”，直接写 ”student”， ”class”，”manager” 等。 一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如案例十 所示。

案例十. 配置 RequireJS

<script type="text/javascript" src="./js/require.js"></script> 
<script type="text/javascript"> 
require.config({ 
 baseUrl: "./js", 
 paths: { 
   "some": "some/v1"
 }, 
waitSeconds: 10 
}); 
require( ["some/module", "my/module", "./js/a.js"], 
 function(someModule,  myModule) {} 
); 
</script>

baseUrl指明的是所有模块的 base URL，比如”my/module”所加载的 script实际上就是 /js/my/module.js。注意，以 .js 结尾的文件加载时不会使用该 baseUrl，它们仍然会使用当前 index.html所在的相对路径来加载，所以仍然要加上”./js/”。如果 baseUrl没有指定，那么就会使用 data-main中指定的路径。

paths 中定义的路径是用于替换模块中的路径，如上例中的 some/module 具体的 JavaScript 文件路径是 /js/some/v1/module.js 。 waitSeconds 是指定最多花多长等待时间来加载一个 JavaScript 文件，用户不指定的情况下默认为 7 秒。

另外一个重要的配置是 packages，它可以指定其他符合 CommonJS AMD 规范的目录结构，由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。

其他可配置的选项还包括 locale、context、deps、callback等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。

更多使用RequireJS库加载JavaScript模块的实例教程相关文章请关注PHP中文网！