Explication graphique et textuelle Require.js

Cette fois, je vous apporte une explication détaillée de Require.js avec des images et du texte, et quelles sont les précautions lors de l'utilisation de Require.js. Voici des cas pratiques, prenons. un regard.

1. Pourquoi utiliser require.js

Tout d'abord, si une page charge plusieurs fichiers js, le navigateur cessera de restituer la page Web. Plus il y a de fichiers chargés, plus la page Web perdra de réponse. Deuxièmement, comme il existe des dépendances entre les fichiers js, cela doit être strictement le cas. Ordre de chargement assuré, lorsque les dépendances sont complexes, l'écriture et la maintenance du code deviendront difficiles.

require.js est de résoudre ces deux problèmes :

1. Implémentez le chargement asynchrone des fichiers js pour éviter que les pages Web ne répondent ;
2. Gérez les dépendances entre les modules pour faciliter l'écriture et la maintenance du code.

2. Chargement de require.js

La première étape consiste à télécharger la dernière version depuis le site officiel et à la mettre directement sur la page à charger

<script src="js/require.js"></script>

Le chargement de ce fichier peut empêcher la page Web de répondre. Vous pouvez le mettre en bas de la page pour le charger, ou vous pouvez l'écrire comme ceci

<script src="js/require.js" defer async="true" ></script>

. L'attribut async indique que ce fichier doit être chargé de manière asynchrone pour éviter que la page Web ne réponde. IE ne prend pas en charge cet attribut et ne prend en charge que defer, donc defer est également écrit.

Après avoir chargé require.js, l'étape suivante consiste à charger notre propre code, qui est l'entrée, qui peut être appelée le module principal. Si le fichier s'appelle main.js, il peut être écrit comme suit :

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略

3. Comment rédiger le module principal

Si le module principal dépend de

jQuery vous pouvez écrire comme ceci

require(['jquery'], function ($){ 
   alert($); 
});

4. Méthode require.config()

require.config({ 
  paths: { 
    "jquery": "jquery.min", 
    "underscore": "underscore.min", 
    "backbone": "backbone.min"
  } 
});

Le code ci-dessus donne les noms de fichiers des trois modules. Le chemin par défaut est le même répertoire que main.js (sous-répertoire js). Si ces modules se trouvent dans d'autres répertoires, comme le répertoire js/lib, il existe deux manières de les écrire.

• La première consiste à préciser les chemins un par un

require.config({ 
  paths: { 
    "jquery": "lib/jquery.min", 
    "underscore": "lib/underscore.min", 
    "backbone": "lib/backbone.min"
  } 
});

• L'autre consiste à changer directement le répertoire de base (baseUrl).

require.config({ 
  baseUrl: "js/lib", 
  paths: { 
    "jquery": "jquery.min", 
    "underscor: "underscore.min", 
    "backbone": "backbone.min" 
  } 
});

• Si un module est sur un autre hébergeur, vous pouvez également spécifier directement son URL, comme

require.config({ 
  paths: { 
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
  } 
});

5. Comment écrire le module AMD

Les modules chargés par require.js adoptent les spécifications AMD. En d'autres termes, le module doit être écrit conformément aux réglementations AMD.

Plus précisément, les modules doivent être définis à l'aide d'une fonction définie () spécifique. Si un module ne dépend pas d'autres modules, il peut être défini directement dans la fonction définir().

// math.js 
define(function (){ 
  var add = function (x,y){ 
    return x+y; 
  }; 
  return { 
    add: add 
  }; 
});

La méthode de chargement est la suivante :

 // main.js 
require(['math'], function (math){ 
  alert(math.add(1,1)); 
});

Si ce module dépend également d'autres modules, alors le premier paramètre de la fonction définir() doit être un tableau indiquant les dépendances du module.

define(['myLib'], function(myLib){ 
  function foo(){ 
    myLib.doSomething(); 
  } 
  return {  //返回模块中的函数 
    foo : foo 
  }; 
});

Lorsque la fonction require() charge le module ci-dessus, le fichier myLib.js sera chargé en premier.

6. Chargement de modules non standards (comment utiliser shim)

// app.js 
 function sayHello(name){ 
  alert('Hi '+name); 
}

// main.js 
require.config({ 
  shim: { 
    'app': { //这个键名为要载入的目标文件的文件名，不能随便命名。 
      exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 
    } 
  } 
}); 
 
require(['app'], function(sayHello) { 
 alert(sayHello()) 
})

Exporter une fonction signifie que nous obtenons une classe

javaScript

Mais si vous écrivez beaucoup de fonctions dans my.js, il est un peu compliqué de les intégrer dans une seule fonction. Voulez-vous les exporter directement ? La méthode est la suivante :

// app.js 
function sayHi(name){ 
 alert('Hi '+name); 
} 
function sayHello(name){ 
 alert('Hiello '+name); 
}

// main.js 
  require.config({ 
    shim: { 
      app: { 
        init: function() { //这里使用init将2个接口返回 
          return { 
            sayHi: sayHi, 
            sayHello: sayHello 
          } 
        } 
      } 
    } 
  }); 
 
  require(['app'], function(a) { 
    a.sayHi('zhangsan'); 
    a.sayHello('lisi'); 
  });

Importation ordonnée de cale

require.config({ 
 
 shim: { 
    'jquery.ui.core': ['jquery'], //表示在jquery导入之后导入 
    'jquery.ui.widget': ['jquery'], 
    'jquery.ui.mouse': ['jquery'], 
    'jquery.ui.slider':['jquery'] 
   }, 
 paths : {  
  jquery : 'jquery-2.1.1/jquery',  
  domReady : 'require-2.1.11/domReady',  
  'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',  
  'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',  
  'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',  
  'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' 
  } 
  });  
 
  require(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'], function($) {    
   $("#slider" ).slider({    
    value:0,   
    min: 0,   
    max: 4,   
    step: 1,   
    slide: function( event, ui ) {}  
     });  
   });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

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!