Exemple de tutoriel sur le chargement de modules JavaScript à l'aide de la bibliothèque RequireJS

La méthode de chargement par défaut de js via les balises de script est synchrone, c'est-à-dire qu'une fois le js dans la première balise de script chargé, la seconde commence à être chargée, et ainsi de suite, jusqu'à ce que tous les fichiers js soient chargés. Et la dépendance de js doit être assurée grâce à l'ordre du script ; lors du chargement de js, le navigateur cessera de répondre, ce qui affecte grandement l'expérience utilisateur. Sur cette base, de nombreuses solutions au problème du chargement et du déchargement de js sont apparues, require js en fait partie.

Les modules chargés par requirejs sont généralement des modules conformes aux normes AMD, c'est-à-dire définis avec définir et ruturn pour renvoyer des modules qui exposent des méthodes et des variables ; requirejs peut également charger des modules qui répondent aux normes AMD, mais c'est le cas. plus gênant. Cette fois Pas impliqué.

exiger le chargement de js main implique les aspects suivants :

l'attribut data-main de la balise de script déclare le module d'entrée chargé par requirejs, async="true" (non-ie) et defer(ie) les balises indiquent une charge asynchrone.

Le chemin correspondant au module de configuration require.config

require déclaration des dépendances

démo html

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

Conforme à la définition du module de connexion d'AMD

//依赖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 n'applique pas de chargeur js D'une part, la nouvelle version du tube d'actifs de Rails regroupera tous les fichiers js dans un seul fichier js, sans plusieurs L'état du chargement de js D'autre part, turbolink utilise la technologie dite pjax, qui a des critiques mitigées. Le lien par défaut est modifié en mode ajax. Seule la partie corps du html est obtenue, et la partie tête. reste inchangé, de sorte que le chargement de js ne s'effectue qu'à la première ouverture du site.

Cas 1 : Charger le fichier JavaScript

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

Le paramètre de tableau de chaînes dans la méthode require peut autoriser différentes valeurs. Lorsque la chaîne se termine par ".js", l'une ou l'autre commence par. "/" ou est une URL, RequireJS pensera que l'utilisateur charge directement un fichier JavaScript. Sinon, lorsque la chaîne est similaire à "my/module", il pensera qu'il s'agit d'un module et utilisera le fichier configuré par l'utilisateur. baseUrl et les chemins pour charger le fichier JavaScript où se trouve le module correspondant. La partie configuration sera présentée en détail plus tard.

Ce qu'il faut souligner ici, c'est que RequireJS ne garantit pas que myFunctionA et myFunctionB doivent être exécutés après le chargement de la page par défaut. Lorsqu'il est nécessaire de s'assurer que le script est exécuté après le chargement de la page, RequireJS fournit un module domReady indépendant, vous devez vous rendre sur le site officiel de RequireJS pour télécharger ce module, il n'est pas inclus dans RequireJS. Avec le module domReady, le code du cas 1 peut être légèrement modifié et ajouté avec une dépendance sur domReady.

Cas 2 : Exécutez JavaScript après le chargement de la page

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

Après avoir exécuté le code dans le cas 2, vous pouvez voir via Firebug que RequireJS sera inséré dans a.js et b sur la page actuelle. js déclare respectivement une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, qui est utilisée pour télécharger des fichiers JavaScript de manière asynchrone. L'attribut async est actuellement pris en charge par la plupart des navigateurs, ce qui indique que le fichier js dans la balise 27835793f4768f4164d1421d99e293bc

Cas 3 : RequireJS inséré 3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

Utilisez RequireJS pour définir le module JavaScript

Le module JavaScript ici est différent du code JavaScript traditionnel La raison est qu'il ne nécessite pas d'accès aux variables globales. La conception modulaire permet au code JavaScript de transmettre ces « variables globales » en tant que paramètres au corps d'implémentation du module via des dépendances lorsqu'il a besoin d'accéder aux « variables globales », évitant ainsi d'avoir à accéder ou à déclarer des variables globales dans l'implémentation. fonctions, évitant ainsi la gestion d'espaces de noms volumineux et complexes.

Comme indiqué dans la spécification AMD pour CommonJS, la définition des modules JavaScript est réalisée via la méthode de définition.

Regardons d'abord un exemple simple. Cet exemple crée un objet étudiant dans le programme principal et place l'objet étudiant dans la classe en définissant un module étudiant et un module de classe.

Cas 4 : module étudiant, student.js

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

Cas 5 : module de classe, class.js

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

Cas 6 : Programme principal

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

Le module étudiant et le module classe sont des modules indépendants. Ensuite, nous définirons un nouveau module. Ce module dépend des modules étudiant et classe, afin que la logique de la partie principale du programme puisse également être empaquetée.

Cas 7 : Module Manager qui s'appuie sur les modules étudiants et classes, 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(); 
  } 
   }; 
 });

Cas 8 : Nouveau programme principal

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

Par le code ci-dessus Exemple, nous avons bien compris comment écrire un module, comment ce module est utilisé, et comment définir les dépendances entre modules. Il y a quand même quelques conseils d'utilisation à rappeler :

Essayez de ne pas fournir l'ID du module. Comme indiqué dans la spécification AMD, cet ID est facultatif. S'il est fourni, il affectera la portabilité du module. l'implémentation de RequireJS, les changements d'emplacement du fichier entraîneront la nécessité de modifier manuellement l'ID.

Chaque fichier JavaScript ne définit qu'un seul module. L'algorithme de recherche du nom du module et du chemin du fichier détermine que cette méthode est optimale. Plusieurs modules et fichiers seront optimisés par l'optimiseur. Évitez la dépendance circulaire du module. Si cela ne peut être évité, vous pouvez ajouter une dépendance sur le module "require" dans le module et configurer RequireJS directement dans le code en utilisant

require(”dependencyModuleName”)

 :

前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在 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中文网！