Comment comprendre la modularité JavaScript ?

La compréhension de la modularité JavaScript est la suivante : 1. Le mode Module, qui ouvre une nouvelle portée grâce aux caractéristiques de fermeture, atténuant les conflits de noms de portée globale et les problèmes de sécurité 2. Le mode CommonJS, principalement utilisé dans le développement de nœuds, chacun ; file est un module et chaque fichier a sa propre portée.

La compréhension de la modularité JavaScript est la suivante :

1. Avant la formation des spécifications modulaires, les développeurs JS utilisaient le modèle de conception Module pour résoudre le problème de pollution à l'échelle mondiale de JS. Le modèle Module a été initialement défini comme une méthode permettant de fournir une encapsulation privée et publique pour les cours de génie logiciel traditionnel. En JavaScript, le mode Module utilise l'auto-appel de fonction anonyme (fermeture) pour encapsuler et distingue les membres privés des membres publics grâce à un comportement d'exposition personnalisé.

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行为
  })(window)

L'exemple ci-dessus est une manière d'écrire le modèle de module. Il ouvre une nouvelle portée grâce à la fonctionnalité de fermeture, ce qui atténue les problèmes de conflits de noms de portée globale et de sécurité. Cependant, les développeurs ne pouvaient pas l'utiliser pour organiser et diviser le code, c'est pourquoi la spécification modulaire basée sur cela a émergé.

Recommandations d'apprentissage associées :

Tutoriel vidéo javascript

2 CommonJS

CommonJS est principalement utilisé. Dans le développement Node, chaque fichier est un module et chaque fichier a sa propre portée. Exposez les membres du public via

. Par exemple :

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

module.exports

De plus, CommonJS introduit des dépendances de module via

, et la fonction require peut introduire les modules intégrés de Node, les modules personnalisés et les modules tiers tels que npm.

// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

require()

À partir du code ci-dessus, nous pouvons voir que la fonction require charge x.js de manière synchrone et renvoie une copie du littéral de sortie module.exports.

Certaines personnes peuvent demander

N'est-ce pas une mission ? Pourquoi est-ce si important ? Nous disons que le modèle Module est la pierre angulaire de la spécification modulaire, et CommonJS est également une encapsulation du modèle Module. Nous pouvons complètement utiliser le mode Module pour obtenir l'effet de code ci-dessus :

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

module.exports.x = x;

Grâce au principe CommonJS simulé par le mode Module, nous pouvons bien expliquer les caractéristiques de CommonJS. Étant donné que CommonJS doit obtenir la valeur de retour de l'appel automatique de la fonction anonyme via l'attribution de valeur, la fonction require est synchrone lors du chargement du module. Cependant, le mécanisme de chargement des modules CommonJS limite l'utilisation de CommonJS sur le client, car le chargement synchrone des modules CommonJS via HTTP prend beaucoup de temps.

3. AMD

// 定义AMD规范的模块
define([function() {
  return 模块
})

est différent de CommonJS

Les modules dépendants standard sont chargés de manière asynchrone et les modules définis sont utilisés comme fonctions de rappel. sur la bibliothèque d'outils de gestion de modules

. Bien entendu, la spécification AMD n'est pas encapsulée par l'auto-appel de fonction anonyme. Nous pouvons toujours utiliser le principe de fermeture pour implémenter les membres privés et publics du module : AMD

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

require.js

<.>4 , CMD

CMD est le résultat standardisé de la définition du module pendant le processus de promotion de SeaJS. recommande les dépendances devant,

recommande les dépendances à proximité.

define(function(require, exports, module) {
  //  同步加载模块
  var a = require('./a');
  a.doSomething();
  // 异步加载一个模块，在加载完成时，执行回调
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 对外暴露成员
  exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

AMD CMD

CMD intègre les fonctionnalités de CommonJS et AMD et prend en charge le chargement synchrone et asynchrone des modules. CMD n'exécute pas un module dépendant après l'avoir chargé, il le télécharge simplement. Une fois tous les modules dépendants chargés, il entre dans la logique principale. Le module correspondant n'est exécuté que lorsque l'instruction require est rencontrée. les modules sont tout à fait cohérents avec l’ordre d’écriture de. Par conséquent, il n'y a pas de processus de requête HTTP lorsque la fonction require dans CMD charge le module de manière synchrone.

5. Module ES6

La modularité ES6 n'est plus une spécification, mais une fonctionnalité du langage JS. Avec le lancement d'ES6, et

sont entrés dans l'histoire. Par rapport à la spécification modulaire, le module ES6 présente deux caractéristiques principales :

AMDCMD

La spécification modulaire génère une copie de la valeur, tandis que le module ES6 génère une référence à la valeur.

• La spécification de modularisation est chargée au moment de l'exécution et le module ES6 est une interface de sortie au moment de la compilation.

• La sortie de la spécification modulaire est un objet, qui ne sera généré qu'après l'exécution du script. Le module ES6 n'est pas un objet. Le module ES6 est un modèle de sortie multi-objet et de chargement multi-objet. En principe, la spécification modulaire est une encapsulation d'appel automatique de fonction anonyme, tandis que le module ES6 utilise l'appel automatique de fonction anonyme pour appeler les membres de sortie.

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!