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