Résumé des cas d'utilisation du chargement modulaire Require.js/AMD en javascript

Chargement modulaire Require.js/AMD

Les développeurs souhaitent utiliser des chargeurs de script pour rendre les applications de scripts riches et chaotiques plus ordonnées, et Require .js est l'une de ces options. Require.js est une boîte à outils puissante qui fonctionne automatiquement avec la technologie AMD pour lisser même les graphiques de dépendances de script les plus complexes.
Regardons maintenant un exemple simple de chargement de script utilisant la fonction Require.js du même nom. La fonction

require(['moment'], function(moment) {
  console.log(moment().format('dddd')); // 星期几
});

require accepte un tableau de noms de modules et charge tous ces modules de script en parallèle. Contrairement à Yepnope, Require.js ne garantit pas que les scripts cibles sont exécutés dans l'ordre, mais s'assure uniquement que leur ordre d'exécution peut répondre à leurs exigences de dépendance respectives, mais uniquement si la définition de ces scripts est conforme à AMD (Asynchronous Module Definition, module asynchrone). définition) spécification.

Cas 1 : Chargement de fichiers JavaScript

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

Comme le montre le cas 1, il existe deux fichiers JavaScript a.js et b.js définissent respectivement deux méthodes myFunctionA et myFunctionB Vous pouvez utiliser RequireJS pour charger ces deux fichiers de la manière suivante. Le code de la partie fonction peut référencer les méthodes de ces deux fichiers.

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", ou commence par "/", ou est une URL, RequireJS est considéré comme tel. 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 chargera le JavaScript là où se trouve le module correspondant en fonction de la baseUrl et des chemins configurés. par le document de l'utilisateur. La partie configuration sera présentée en détail plus tard.

Ce qu'il convient de 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. La page est chargée, RequireJS fournit un module indépendant domReady, 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écuter JavaScript une fois la page chargée

 <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 insérera une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour a.js et b.js sur la page actuelle pour télécharger les 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é 27835793f4768f4164d1421d99e293bc Require.js est chargé de fournir une fonction globale nommée définir, qui a trois paramètres :
Nom du module ,

Liste des dépendances des modules,

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

des rappels déclenchés à la fin du chargement de ces modules dépendants.
• Utilisez RequireJS pour définir des modules JavaScript
  Le module JavaScript ici est différent du code JavaScript traditionnel en ce sens qu'il n'a pas besoin d'accéder 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.
• Jetons d'abord un coup d'œil à un exemple simple. Dans cet exemple, en définissant un module étudiant et un module de classe, nous créons un objet étudiant dans le programme principal et plaçons l'objet étudiant dans la classe.

Cas 4 : module étudiant, student.js

Cas 5 : module de classe, class.js

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

Cas Six : Programme principal

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

Le module étudiant et le module classe sont des modules indépendants. Ensuite, nous définissons un nouveau module, ce module. s'appuie sur les modules étudiants et classes, de sorte que la logique de la partie principale du programme peut également être packagée.
Cas 7 : Module Manager qui s'appuie sur les modules étudiants et classes, manager.js

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

Cas 8 : Nouveau programme principal

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

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

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!