Qu'est-ce que la modularisation js ? Introduction à la modularisation js

Qu'est-ce que la modularisation js ? La modularité JS n'est pas un concept qui existait depuis le début, mais les exigences en matière d'ingénierie sont de plus en plus élevées et le besoin de développement de modules JS est apparu. Par conséquent, il s'agit du développement de modules js. Jetons un coup d'œil à quelques exemples de modularisation JavaScript.

Historique du développement modulaire

JS n'avait pas le concept de modularité au début. Jusqu'à ce qu'Ajax soit proposé, le front-end pouvait demander des données au back-end. plus complexe, et de nombreux problèmes sont apparus Problème : Les variables globales, les conflits de noms de fonctions, les dépendances sont difficiles à gérer.
À cette époque, des fonctions de sous-exécution étaient utilisées pour résoudre ces problèmes. Par exemple, le jquery classique utilisait des fonctions anonymes auto-exécutables pour encapsuler le code et les montait toutes sous la variable globale jquery.

CommonJs

CommonJs est développé via nodeJs. Chaque fichier js est un module, et chaque module a une portée distincte. Le module utilise module.exports comme exportation et génère un objet. Utilisez la méthode require pour lire le fichier et renvoyer son objet module.exports interne.

Le problème avec CommonJs est que son chargement est synchrone, ce qui est normal côté serveur, mais ne s'applique pas dans un navigateur plein d'asynchrones. La communauté était divisée sur l'adaptation au navigateur.

AMD

AMD est une définition de module asynchrone. Le nom chinois signifie définition de module asynchrone. Il s'agit d'une spécification pour le développement modulaire côté navigateur n'étant pas supporté nativement par JavaScript, l'auteur d'AMD a personnellement implémenté RequireJS qui est conforme à la spécification AMD.
La spécification AMD stipule que la fonction globale définie est utilisée pour définir le module. L'utilisation est définie (id, dépendances, usine) ; où id est l'identifiant du module, les dépendances sont un tableau et à l'intérieur du tableau se trouvent d'autres modules. dont dépend le module, et factory est une fonction anonyme, qui contient la logique du module.
La société utilise actuellement les spécifications AMD.
Par exemple :

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

Le problème avec requireJs est que lorsqu'ils sont ajoutés à un module, tous les modules dépendants du module seront préchargés, mais ces dépendances ne seront probablement pas utilisées au début. Il est également très difficile d’écrire une longue liste de dépendances en même temps. Ce qui est mieux, c'est qu'AMD conserve les trois fonctions require, exports et module dans commonJs. Vous n'avez pas besoin de toutes les écrire dans des dépendances, mais utilisez require pour les introduire en cas de besoin.

CMD

Étant donné que requirejs présente tous les aspects inélégants mentionnés ci-dessus, il doit y avoir de nouvelles choses pour l'améliorer. C'est l'étoile montante de Seajs. L'auteur de Seajs est un front Taobao national. fin pionnier. seajs embrasse pleinement la spécification Modules/Wrappings et n'utilise pas la méthode de rappel pour écrire des modules comme requirejs. Et il ne suit pas entièrement la spécification Modules/Wrappings. Seajs n'utilise pas declare pour définir les modules, mais utilise la même définition que requirejs. L'auteur préfère peut-être ce nom. (Cependant, cela créera plus ou moins de confusion dans la compréhension des gens). La façon de définir un module à l'aide de seajs est la suivante :

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

Lors de la définition d'un module, il n'est pas nécessaire de lister le tableau de dépendances. . Il doit être transmis dans la fonction factory. Les paramètres formels require, exports, module, puis il appellera la méthode toString de la fonction factory, effectuera une correspondance régulière sur le contenu de la fonction et analysera les dépendances via le correspondant à l'instruction require, réalisant ainsi véritablement le code de style commonjs.

La différence entre AMD et CMD

La différence la plus évidente entre AMD et CMD est la gestion différente des dépendances lors de la définition des modules
AMD prône la pré-dépendance, qui est requise lors de la définition des modules Déclarez les modules dont il dépend
CMD favorise les dépendances proches et n'exige que lorsqu'un certain module est utilisé
Cette différence a ses propres avantages et inconvénients, ce n'est qu'un écart syntaxique, et requireJS et SeaJS se supportent mutuellement . Écriture du

Standard de module ES6 orienté vers l'avenir

ES6 prend en compte la modularité et utilise l'importation et l'exportation, mais actuellement les navigateurs ne le prennent pas en charge, et ce standard n'est qu'un prototype.

Recommandations associées :

Encapsuler une méthode dans js - modularisation

Premier contact avec JS require.js Modular Tools

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!