Explication détaillée de l'utilisation de RequireJs

一、为什么使用RequireJS？

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

上述多个js文件加载的时候，浏览器会停止网页渲染（JS阻塞浏览器渲染），加载文件越多，网页失去响应的时间就会越长；另外各文件的依赖关系很难管理。

RequireJs的作用：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

（3）定义了一个作用域来避免全局名称空间污染。

Deuxième partie : Charge du require.js

1.DeSite officielTéléchargez la dernière version de require et placez-la dans le répertoire js, utilisez l'insertion de script pour inclure la page :

Pour ne pas bloquer le rendu de la page, vous pouvez le placer en bas de l'HTML ou le modifier de la manière suivante :

L'attribut async indique que ce fichier doit être chargé de manière asynchrone (l'attribut defer est compatible avec IE).

2.Chargement du code logique de la page :

Supposons que le fichier de code soit main.js et soit placé dans le répertoire js, voici plusieurs façons de l'inclure :

Méthode1:

data-L'attribut main spécifie l'entrée principale du programme web, ce fichier sera le premier à être chargé par requirejs. Par défaut, les ressources dépendantes de requirejs sont des fichiers js, donc main.js peut être abrégé en main.

Méthode2:

Après avoir chargé require.js, chargez le fichier de configuration config (si existant) via requirejs, puis chargez le module principal :

require(['configUrl'],function () { //config.js doit être chargé par requirejs pour s'enregistrer
 require([moduleAName],function(moduelA){
 //Code logique
 )
});

Troisième partie : Ecriture du module principal

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

La fonction require() prend deux arguments, le premier est un tableau, indiquant les modules dépendants du module actuel; le second est une fonction de rappel, qui sera appelée lorsque tous les modules spécifiés ont été chargés avec succès. Les modules chargés seront passés en tant que paramètres à la fonction de rappel, permettant ainsi d'utiliser ces modules (les modules dépendants ayant une valeur de retour) à l'intérieur de la fonction de rappel.

require() charge de manière asynchrone les modules moduleA, moduleB et moduleC, et le navigateur ne perdra pas sa réponse; la fonction de rappel spécifiée ne s'exécutera que lorsque tous les modules dépendants ont été téléchargés et exécutés la fonction de rappel correspondante.

Quatrième partie : Configuration des modules

La méthode require.config() peut définir les chemins des modules et définir les dépendances sous forme de noms de modules courts. Cette méthodePeut être écrit devant chaque module principal (main.js), et utilisé en conjonction avec le module principal.

Les paramètres sont un objet, et l'attribut paths de cet objet spécifie les chemins de chargement de chaque module. PathsIl est possible de configurer plusieurs chemins，si la bibliothèque CDN distante n'a pas réussi à se charger, chargez la bibliothèque locale.

Si la configuration du module n'est pas définie, les dépendances du module principal doivent être écrites avec le chemin complet.

Configurez les chemins à la demande sur chaque page :

require.config({  //Configuration de l'enregistrement du module, à utiliser pour le code suivant
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

Ou configurez la configuration config en tant que fichier js séparé, puis

require([“configJsUrl”],function(){  //Il est nécessaire de charger la configuration du module de manière asynchrone via require dans le fichier main
 require([‘ModuleName’],function(Name){
 …other code
 )
)

Pour éviter de devoir imbriquer require dans chaque page, vous pouvez également utiliser la méthode suivante :

Créez d'abord un fichier config.js séparé :

require.config({ //Configuration de l'enregistrement du module, à utiliser pour le code suivant
 baseUrl: "/js/app/" //Les autres dépendances sont des chemins relatifs par rapport à cette position
 // Configuration des chemins
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “Nom court du module” : ”L'adresse de chemin par rapport à baseUrl, en omettant l'extension du fichier module.js”
 },
 // Les bibliothèques écrites en mode non AMD doivent être réconfigurées
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（le nom court du module doit toujours être défini avec le chemin d'accès）: {
  exports: 'Backbone',  　　　　//Le nom de la variable de sortie de la bibliothèque, indiquant le nom sous lequel ce module est appelé en externe
  deps:['jquery','underscore'] //Les dépendances de ce module
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//Les paramètres des ressources JavaScript, contrôlant la mise à jour du cache de version
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main，则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径，则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档路径的脚本：

•　　　以 ".js" 结束.

•　　　以 "/" 开始.

•　　　包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求，每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求，影响网页的加载速度。因此require.js提供了一个优化工具(r.js)，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数，但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块，必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义，通常返回一个对象，该对象具有供别的模块使用的方法或属性；或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件，允许require.js异步加载txt、css或html等文本资源供js使用，而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template, cat) {
 $('body').append($(template));
 document.body.appendChild(cat);
　}
);

Attention :

Les dépendances du module peuvent être introduites à la fois par [] et par la méthode require() dans la fonction callback, ce qui a le même effet. Parce que la méthode define scanne d'abord les dépendances de la méthode require dans la fonction callback via des expressions régulières et télécharge les dépendances, puis exécute la fonction callback. Mais à ce moment-là, il faut passer en paramètre la dépendance require elle-même, sinon une erreur sera signalée :

define(function(require) {
 var helper = require('helpModuleUrI');//et chargera également cette dépendance à l'avance
 ...
)

Lorsque plusieurs modules dépendent de la même module plusieurs fois consécutivement, ce module ne sera téléchargé et initialisé qu'une seule fois, et require conservera une référence à elle pour que d'autres modules puissent l'utiliser à nouveau.

Distinction entre l'exécution de la méthode require et l'exécution de la callback :

require('config', callBack1);
require('b', callBack2);
// Les deux méthodes require s'exécuteront immédiatement, mais l'ordre d'exécution de callBack est indéterminé, dépendant de l'ordre de téléchargement.
//Contrairement au code suivant, il s'exécutera strictement en ordre
require('config', function() {
 require('b', callBack2)
)

Voici la totalité du contenu de cet article. J'espère que le contenu de cet article peut apporter un certain avantage à votre apprentissage ou à votre travail, et j'espère également que vous soutenerez davantage le tutoriel d'encouragement !

Déclaration : le contenu de cet article est extrait du réseau, propriété du propriétaire original, contribué et téléchargé spontanément par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.

Tutoriel de base