Une brève analyse de l'écriture modulaire de js require.js

requirejs est un chargeur de fichiers et de modules JavaScript. requireJS vous permet de séparer votre code JavaScript en fichiers et modules tout en gérant les dépendances entre chaque module.

L'objectif de RequireJS est d'encourager la modularisation du code, et il utilise une étape de chargement de script différente de celle de la balise "script" traditionnelle. L'utilisation de RequireJS pour charger des scripts modulaires améliorera la vitesse de chargement et la qualité de votre code.

1. Pourquoi utiliser require.js ?

Au début, tous les codes Javascript étaient écrits dans un seul fichier, et il suffisait de charger ce seul fichier. Plus tard, il y a eu de plus en plus de codes, et un seul fichier ne suffisait plus. Il fallait le diviser en plusieurs fichiers et les charger séquentiellement. Je pense que beaucoup de gens ont vu le code de page Web suivant :

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

Ce code charge plusieurs fichiers js en séquence.

Cette façon d’écrire présente de gros inconvénients.

Tout d'abord, lors du chargement, le navigateur cessera de restituer la page Web. Plus il y a de fichiers chargés, plus la page Web perdra de réponse

En raison des dépendances entre les fichiers js, il doit strictement garantir l'ordre de chargement (par exemple, 1.js dans l'exemple ci-dessus doit être avant 2.js), et le module avec la plus grande dépendance doit être chargé en dernier. Lorsque les dépendances sont complexes, l'écriture et la maintenance du code deviendront difficiles. .

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

Réaliser le chargement asynchrone des fichiers js pour éviter que les pages Web ne perdent de réponse

Gérer les dépendances entre les modules Cela facilite les choses ; pour écrire et maintenir du code.

2. Chargement de require.js

La première étape pour utiliser require.js consiste à télécharger la dernière version sur le site officiel.

Après le téléchargement, on suppose qu'il est placé dans le sous-répertoire js et qu'il peut être chargé.

7c439788e166f531c8ad0b30265c71032cacc6d41bbb37262a98f745aa00fbf0

Certaines personnes peuvent penser que le chargement de ce fichier peut également entraîner une perte de réponse de la page Web. Il existe deux solutions :

L'une consiste à le charger en bas de la page Web, et l'autre consiste à l'écrire comme suit : ​

46976b525360c23a7c544a1e4f72c32c2cacc6d41bbb37262a98f745aa00fbf0

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. Supposons que notre propre fichier de code soit main.js et soit également placé dans le répertoire js. Ensuite, écrivez-le simplement comme suit : 　

35be17e58c59207c30045b58673f385a2cacc6d41bbb37262a98f745aa00fbf0

Les données L'attribut -main est utilisé pour spécifier le module principal du programme Web.

Dans l'exemple ci-dessus, il s'agit de main.js sous le répertoire js. Ce fichier sera d'abord chargé par require.js. Étant donné que l'extension de fichier par défaut de require.js est js, main.js peut être abrégé en main.

3. Comment écrire le module principal

Le main.js dans la section précédente, je l'appelle le "module principal", ce qui signifie le code d'entrée de toute la page Web. C'est un peu comme la fonction main() en langage C, tout le code commence à s'exécuter à partir d'ici.

Voyons comment écrire main.js.

Si notre code ne dépend d'aucun autre module, nous pouvons écrire directement du code javascript. La fonction

// main.js
 alert("加载成功！");
但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。 　　// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
 // some code here
});

require() accepte deux paramètres. Le premier paramètre :

Un tableau indiquant les modules dont il dépend. L'exemple ci-dessus est ['moduleA', 'moduleB', 'moduleC'], c'est-à-dire que le module principal dépend de ces trois modules ; 🎜>

Une fonction de rappel, qui sera appelée lorsque tous les modules précédemment spécifiés seront chargés avec succès. Les modules chargés seront transmis à cette fonction en tant que paramètres, afin que ces modules puissent être utilisés dans la fonction de rappel.

require() charge moduleA, moduleB et moduleC de manière asynchrone, et le navigateur ne perdra pas de réponse ; la fonction de rappel qu'il spécifie ne s'exécutera qu'après le chargement réussi des modules précédents, résolvant ainsi le problème de dépendance.

Ci-dessous, nous examinons un exemple pratique.

En supposant que le module principal dépend des trois modules jquery, underscore et backbone, main.js peut être écrit comme ceci : ​

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    // some code here
});

require.js chargera d'abord jQuery, underscore et le backbone, puis exécutez à nouveau la fonction de rappel. Le code du module principal est écrit dans la fonction de rappel.

4. Chargement du module

Dans le dernier exemple de la section précédente, les modules dépendants du module principal sont ['jquery', 'underscore', 'backbone']. Par défaut, require.js suppose que ces trois modules se trouvent dans le même répertoire que main.js, les noms de fichiers étant jquery.js, underscore.js et backbone.js, puis les charge automatiquement.

En utilisant la méthode require.config(), nous pouvons personnaliser le comportement de chargement du module. require.config() est écrit en tête du module principal (main.js). Le paramètre est un objet, et l'attribut paths de cet objet spécifie le chemin de chargement de chaque module. ​

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 à spécifier les chemins un par un. ​

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

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

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

Si un module est sur un autre hébergeur, vous pouvez également préciser directement son URL, comme par exemple :

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

require.js要求:

每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写： 　　

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

加载方法如下： 　

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

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。 　　

define(['myLib'], function(myLib){
　　　function foo(){
　　　　　myLib.doSomething();
　　　}
　　　return {
　　　　　foo : foo
　　　};
　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。 　　

require.config({
 shim: {
  'underscore': {
   exports: '_'
  },
  'backbone': {
   deps: ['underscore', 'jquery'],
   exports: 'Backbone'
  }
 }
});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

shim: {
　　'jquery.scroll': {
　　　　deps: ['jquery'],
　　　　exports: 'jQuery.fn.scroll'
　　}
}

七、require.js插件

require.js还提供一系列插件，实现一些特定的功能:

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc) {
 // called once the DOM is ready
});

text和image插件，则是允许require.js加载文本和图片文件。 　　

define([
   'text!review.txt',
   'image!cat.jpg'
  ],
  function (review, cat) {
   console.log(review);
   document.body.appendChild(cat);
  }
);

类似的插件还有json和mdown，用于加载json文件和markdown文件。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持PHP中文网！

更多浅析js的模块化编写 require.js相关文章请关注PHP中文网！