Comment modulariser require.js avec js front-end

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.

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 :

implémenter 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é.
　

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'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.

L'attribut data-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.

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, il vous suffit de l'écrire comme suit :
　

<script src="js/require.js" data-main="js/main"></script>

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

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

3. Comment écrire le module principal

Le main.js dans la section précédente, je l'appelle le "module principal", ce qui signifie l'entrée code de la page Web entière. 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.
　

// main.js
alert("加载成功！");

Mais dans ce cas, il n'est pas nécessaire d'utiliser require.js. Une situation très courante est que le module principal dépend d'autres modules, auquel cas la fonction require() définie par la spécification AMD doit être utilisée.
　

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});

> La fonction 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, elle sera appelée une fois que tous les modules précédemment spécifiés auront été 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'une fois les modules précédents chargés avec succès, résolvant ainsi le problème des dépendances.

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 sera chargez d'abord jQuery, le trait de soulignement et le backbone, puis exécutez 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ôte, vous pouvez également spécifier directement son URL, par exemple :

　

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

exigences 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文件

本篇介绍了用前端js模块化编写require.js，想要更多相关学习内容请关注php中文网。

相关推荐：

关于AJAX ASP/PHP 请求实例的相关知识

关于AJAX中 XML 的实例讲解

关于 AJAX 投票的演示

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!