Explication détaillée de l'utilisation des compétences require.js_javascript

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 le charger séquentiellement. Je pense que beaucoup de gens ont vu le code de la page Web ci-dessous.

　<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. Deuxièmement, en raison des dépendances entre les fichiers js, l'ordre de chargement doit être strictement garanti (tel que). comme dans l'exemple ci-dessus) 1.js doit être devant 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 :

　

(1) Implémenter le chargement asynchrone des fichiers js pour éviter que les pages Web ne perdent de réponse

(2) Gérer les dépendances entre les modules pour faciliter l'écriture et la maintenance du code.

2. Chargement de require.js

La première étape pour utiliser require.js consiste à télécharger la dernière version depuis 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é.

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

Certaines personnes peuvent penser que le chargement de ce fichier peut également empêcher la page Web de répondre. Il existe deux solutions. L'une est de le charger en bas de la page Web, et l'autre est de 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. Supposons que notre propre fichier de code soit main.js et soit également placé dans le répertoire js. Ensuite, écrivez-le comme ceci :

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

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.

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.

// main.js
alert("Chargement réussi!");

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 est 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. fonction. Actuellement, il sera appelé une fois que tous les modules spécifiés ci-dessus 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'après le chargement réussi des modules précédents, résolvant ainsi le problème de dépendance.

Ci-dessous, regardons un exemple pratique.

En supposant que le module principal dépend des trois modules jquery, underscore et backbone, main.js peut s'écrire comme ceci :

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

require.js chargera d'abord jQuery, le trait de soulignement et le backbone, puis exécutera 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 et que les noms de fichiers sont respectivement 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"
　　　　}
　　});

上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。

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

另一种则是直接改变基目录（baseUrl）。

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

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

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结构加载完成后再运行。

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

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

以上就是本文的全部所述，希望本文分享对大家有所帮助。