Modularité JS-RequireJS

Aujourd'hui, je vous présente la modularisation JS - RequireJS Quelles sont les précautions concernant la modularisation JS et comment devez-vous utiliser RequireJS ? Ce qui suit est un cas pratique, jetons-y un œil.

J'ai toujours entendu parler de RequireJS auparavant, mais je n'ai jamais eu la chance d'en apprendre davantage. Je sais seulement que c'est une API pour la modularisation de js. Je travaille récemment sur React et ses idées de modularisation coïncident avec les idées de modularisation js. Je veux juste ajouter RequireJS au projet tout en appliquant React pour voir si cela aura un bon effet sur le chargement ou le développement des pages.

Qu'est-ce que RequireJS ?

Avant d'expliquer ce qu'est RequireJS, je dois mentionner le contexte de l'histoire modulaire de Javascript. En fait, au début, JavaScript est apparu comme un langage de script émergent doté d’une vision immense. Ce n’était pas un langage conçu uniquement pour le client. C’est juste qu’avec la popularité ultérieure des applications Web, JavaScript s’est rapidement répandu en tant que langage de script côté navigateur, et la concurrence entre Netscape et Microsoft l’a standardisé prématurément. Cela a conduit à de nombreux défauts de JS, dont l'un est la modularité (mais vous pouvez être surpris de constater que javascript utilise effectivement import, export, etc. comme mots réservés, ce qui montre que cela a effectivement été pris en compte lors de la conception. Le nouveau standard es6 permet également la modularisation native des supports). Puis, à mesure que les applications Web deviennent de plus en plus complexes, de plus en plus de codes JavaScript sont intégrés, et avec l'essor des nœuds, la programmation modulaire devient indispensable.

Il y a donc eu le système de modules pris en charge plus tard par la boîte à outils Dojo et la bibliothèque Closure de Google. Il existe également deux spécifications standards très courantes, CommonJS et AMD. Je n'entrerai pas dans les détails ici. Il suffit de savoir que l'API qui implémente la spécification CommonJS charge les modules de manière synchrone, tandis que l'API qui implémente la spécification AMD charge les modules de manière asynchrone.
Donc en théorie, le chargement non bloquant des spécifications AMD est plus adapté au navigateur. RequireJS est la meilleure implémentation de la spécification AMD. Copiez une description de RequireJS à partir d'un document officiel :

RequireJS est un chargeur de module JavaScript. C'est idéal pour une utilisation dans le navigateur, mais il peut également être utilisé dans d'autres environnements de script, comme Rhino et Node. L'utilisation de RequireJS pour charger des scripts modulaires améliorera la vitesse de chargement et la qualité de votre code.

Pourquoi RequireJS ?

Donc, maintenant que nous savons ce que fait RequireJS, nous savons presque pourquoi nous utilisons RequireJS. Mais résumons les avantages de l’utilisation de RequireJS.

"Chargement" asynchrone. Nous savons que les sites Web placent généralement le script à la fin du code HTML, afin d'éviter le blocage des pages provoqué par le navigateur exécutant js. En utilisant RequireJS, la fonction de rappel sera exécutée après le chargement du js correspondant. Ce processus est asynchrone, il ne bloquera donc pas la page.

Chargement sur demande. Grâce à RequireJS, vous pouvez charger le module js correspondant lorsque vous devez charger la logique js, évitant ainsi un grand nombre de requêtes et de transmission de données lors de l'initialisation de la page Web. Peut-être que pour certaines personnes, certains modules peuvent ne pas être disponibles du tout. est nécessaire, alors cela semble inutile.

Gestion plus pratique des dépendances des modules. Je pense que vous devez avoir rencontré des erreurs de dépendance en raison de problèmes d'ordre des balises de script. Cette fonction n'est pas définie, cette variable n'est pas définie, etc. Grâce au mécanisme de RequireJS, vous pouvez garantir que les fichiers associés sont exécutés une fois tous les modules dépendants chargés, afin qu'ils puissent jouer un rôle dans la gestion des dépendances.

Gestion des versions plus efficace. Pensez-y, si vous utilisez encore un script pour introduire un jQuery2, modifiez ces 100 pages. Mais si votre requireJS a un mappage de chemin jQuery dans la configuration, vous n'avez besoin de changer qu'un seul endroit.

Bien sûr, il existe d'autres avantages tels que cdn incapable de charger les fichiers js, des fichiers locaux peuvent être demandés, etc., que je ne listerai pas ici.

RequireJS Utilisez

Fichiers qui doivent être introduits dans la page

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

Utilisez RequireJS, il vous suffit d'introduire un require.js. Il convient de noter qu'une meilleure pratique consiste à introduire ce js uniquement via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Ensuite, toute la logique métier de votre page n'a plus qu'à être écrite dans main.js (le rôle de l'attribut data-main sera discuté plus tard). Que faire des autres dépendances référencées ? Bien entendu, il est introduit à la demande via require!

Aperçu de base de Require

En fait, l'intégralité du fichier source de Requirejs, y compris les commentaires, ne contient que 2000 lignes, et ses variables exposées en externe sont en fait trois, requirejs, require et definition.

Requirejs n'est qu'un alias de require. Le but est que s'il existe une autre implémentation de require dans la page, vous pouvez toujours utiliser l'API requireJS en utilisant requirejs (il n'y a pas de conflit pertinent dans cet article, donc require est toujours utilisé).

Cela signifie donc que pour commencer, il vous suffit de maîtriser require, require.config et définir.

本文将以介绍require,require.config,data-main,define的顺序来介绍RequireJS。让比较简单的RequireJS更加简单，争取让大家只看这篇文章就能用好RequireJS。至于RequireJS是如何解决循环依赖,对于没有实现amd的模块如何通过shim来导出，如何在node中使用等问题。本文并没有提及，详细有需要可以去官方查阅。

require.js可以通过npm下载或者在官网获得。jquery同理，jquery需要下载1.7.0或以上的版本。然后把对应的代码拷入对应的文件中，给出余下两个文件的代码:

//  js/script/index.html<!DOCTYPE html><html><head>
    <title>Require Demo 1</title></head><body>
    <div>
        <h1>Require Demo 1 -- usage of Require()</h1>
        <button id="contentBtn">Click me</button>
    <p id="messagebox"></p>
    </div>
    <script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script> </body></html>      
    //  js/script/main.js
    require.config(
        {            paths: {                &#39;jquery&#39;: &#39;../lib/jquery-1.7.2&#39;
            }
        }
    );    require([&#39;jquery&#39;],function ($) {
             $(document).on(&#39;click&#39;,&#39;#contentBtn&#39;,function(){
                $(&#39;#messagebox&#39;).html(&#39;You have access Jquery by using require()&#39;);
             });
    });

先看index.html的代码，其实比较简单，页面上在js中会用到的就是一个button和一个p标签。然后整个页面就只是一个js文件是通过3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的，就是require.js。注意到标签中有一个data-main属性，你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件，所以这个js文件被加载的时候，RequireJS已经加载执行完毕。

然后接着看main.js文件,里面被一个匿名立即执行函数所包括。在require.config(...)中，可以配置许多配置项，后面会有详细说明。上面在config中添加了一个path，在path配置了一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。

然后接着就是我们的require(...)函数了。上面的语法中require函数接受的第一个参数是，所依赖模块的一个数组。即使你只需要传入一个依赖，也需要把这个依赖放进数组中传入。如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径，如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API。所以有注入的模块需要放在无注入或者不需要调用模块的模块前面，方便回调函数传入别名。例子中在回调函数中为id为contentBtn的button注册监听事件，如果触发，则往id为messagebox的p标签添加相应的内容。

另外还需要额外说明的是路径，不管是在配置中写路径还是直接在require函数中写路径，你都需要了解requireJS在不同情况下的相对路径。

以下是相对路径的规则:

1.如果3f1c4e4b6b16bbbd69b2ee476dc4f83a标签引入require.js时没有指定data-main属性，则以引入该js的html文件所在的路径为根路径。

2.如果有指定data-main属性，也就是有指定入口文件，则以入口文件所在的路径为根路径。在本例子中也就是main.js所在的script文件夹就是根路径，这也是为什么配置jQuery的时候需要返回上层目录再进入lib目录才能找到jQuery文件。

3.如果再require.config()中有配置baseUrl，则以baseUrl的路径为根路径。
以上三条优先级逐级提升，如果有重叠，后面的根路径覆盖前面的根路径。

define

讲完了如何引入模块，现在讲如何定义一个模块,require定义一个模块是通过 define = function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。
先看个例子:

当你没有任何依赖的时候,你可以这么写:

//   js/script/desc.jsdefine(function(){    return{        decs : 'this js will be request only if it is needed',    };})      
//   然后在main.js的添加如下代码//   js/script/main.js
    $('#messagebox').html('You have access Jquery by using require()');
＋  require(['script/desc'],function(desc){
＋       alert(JSON.stringify(desc));

再次打开网页，打开network视图，点击按钮，通过require获得的desc模块就会alert出来，同时你会发现，desc.js是按需请求的，并不是在页面一开始的时候就请求的。

总结

以上就是关于关于RequireJS简单使用的介绍了，大家有需要可以直接看源码，大概就2000多行，不看具体实现，看它对几个函数声明的描述，对使用起来也是很有帮助的，你会发现有一些连官方文档都没提及到的一些特性(比如require()方法可以直接传入config配置作为第一个参数)。

De plus, petit aparté, si vous avez besoin de vérifier l'API officielle de RequireJS, il est recommandé de visiter directement la documentation officielle en anglais si possible. Si la documentation officielle chinoise est toujours bloquée dans l’ancienne version, oubliez-la car la traduction est saccadée et difficile à comprendre. Certaines descriptions manifestement fausses relèvent en réalité de la responsabilité. C'était vraiment difficile pour moi de comprendre lorsque je lisais le document chinois. Plus tard, lorsque j'ai lu directement le document anglais, c'est devenu beaucoup plus fluide.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Utilisation de Video.js pour implémenter l'interface de diffusion en direct H5

Comment mémoriser le compte et le mot de passe avec le code JS

Type de données mentales de base JavaScript

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!