Quelles sont les méthodes pour implémenter la modularité JS ? Explication de la modularisation js

Ce que cet article vous apporte, c'est quelles sont les méthodes d'implémentation de la modularisation JS ? L'explication de la modularisation js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

1. Contexte de CommonJS
 : Au début, tout le monde pensait que JS était un jeu d'enfant et inutile. L'API officiellement définie ne peut créer que des applications basées sur un navigateur. c'est que je n'en peux plus, CommonJS L'API définit de nombreuses API utilisées par les applications courantes (principalement des applications autres que celles du navigateur), comblant ainsi cette lacune. Son objectif ultime est de fournir une bibliothèque standard similaire à Python, Ruby et Java. Dans ce cas, les développeurs peuvent utiliser CommonJS API pour écrire des applications, qui peuvent ensuite s'exécuter sur différents interpréteurs JavaScript et différents environnements hôtes. En 2009, le programmeur américain Ryan Dahl a créé le projet node.js, qui utilise le langage JavaScript pour la programmation côté serveur. Cela marque la naissance officielle de la « programmation modulaire Javascript ». Parce que pour être honnête, dans un environnement de navigateur, ne pas avoir de modules n'est pas un gros problème. Après tout, la complexité des programmes Web est limitée, mais côté serveur, il doit y avoir des modules pour interagir avec le système d'exploitation et les autres applications. sinon il n'y a aucun moyen de programmer.

Représentants spécifiques : nodeJs, webpack
Principe : La raison fondamentale pour laquelle les navigateurs ne sont pas compatibles avec CommonJS est la manque de quatre variables d'environnement Node.js (module, exports, require, global, tant que ces quatre variables peuvent être fournies, le navigateur peut charger le module CommonJS.
Implémentation simple :

var module = {  
exports: {}
};
(function(module, exports) {  
exports.multiply = function (n) { 
return n * 1000 
};
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000

Le code ci-dessus fournit deux variables externes, module et exports, à une fonction d'exécution immédiate. Le module est placé dans cette fonction d'exécution immédiate. La valeur de sortie du module est placée dans module. .exports, il est donc implémenté

2. AMD
Contexte : Après la sortie de nodeJS basé sur la spécification commonJS, le concept de Des modules côté serveur ont été créés. Cependant, en raison d'une limitation majeure, CommonJS. La spécification ne s'applique pas aux environnements de navigateur. var math = require('math'); math.add(2, 3);require est synchrone. Ce n'est pas un problème côté serveur, car tous les modules sont stockés sur le disque dur local et peuvent être chargés de manière synchrone. Le temps d'attente est le temps de lecture du disque dur. Cependant, pour les navigateurs, c'est un gros problème, car les modules sont placés côté serveur et le temps d'attente dépend de la vitesse du réseau. Cela peut prendre beaucoup de temps et le navigateur est dans un état "suspendu". . Les modules côté navigateur ne peuvent pas utiliser le « chargement synchrone » (synchrone), mais ne peuvent utiliser que le « chargement asynchrone » (asynchrone). C’est dans ce contexte qu’est née la spécification AMD.

Représentation spécifique : RequireJS
Exemple d'utilisation : require([dependencies], function(){});
La fonction require() accepte deux paramètres
Le premier paramètre est un tableau, indiquant les modules dont il dépend
Le deuxième paramètre est une fonction de rappel Lorsque tous les modules précédemment spécifiés sont chargés avec succès, il le fera. être appelé. Les modules chargés seront transmis à la fonction en tant que paramètres, ces modules peuvent donc être utilisés dans la fonction de rappel

// 定义模块 myModule.js
define(['dependency'], function(){    
var name = 'Byron';    
function printName(){        
console.log(name);    
}
    return {        
    printName: printName    
    };
    });
// 加载模块
require(['myModule'], function (my){　 
my.printName();
});

3, CMD
pour générer Contexte  : CMD est la définition commune du module. La spécification CMD a été développée au niveau national. Tout comme AMD a requireJS, CMD a l'implémentation du navigateur SeaJS. Les problèmes que SeaJS doit résoudre sont les mêmes que requireJS, mais dans la définition du module. la méthode et le timing de chargement du module (on peut dire qu'il est exécuté et analysé) sont différents
Représentation spécifique : Sea.js
Exemple d'utilisation : l'usine est une fonction. . Il y a trois paramètres, function(require, exports, module)
require est une méthode qui accepte l'ID du module comme seul paramètre, utilisée pour obtenir les interfaces fournies par d'autres modules : require(id)
exports est. un objet, utilisé pour fournir une interface de module vers l'extérieur
Le module est un objet qui stocke certains attributs et méthodes associés au module actuel

// 定义模块  myModule.js
define(function(require, exports, module) {  
var $ = require('jquery.js')  
$('p').addClass('active');});
// 加载模块
seajs.use(['myModule.js'], 
function(my){
});

La différence entre AMD et CMD :
Mécanisme d'exécution : l'attitude de SeaJS envers les modules est une exécution paresseuse, tandis que l'attitude de RequireJS envers les modules est une pré-exécution
Spécifications suivantes : RequireJS suit la spécification AMD (Asynchronous Module Definition), Sea.js suit la CMD (Définition de module commun) spécification. La différence de spécifications conduit à des API différentes entre les deux

4 modules ES6

.

Contexte : Avant Es6*, JavaScript n'avait pas de système de modules. Il était impossible de diviser un gros programme en petits fichiers qui dépendaient les uns des autres et de les assembler ensuite de manière simple. Les projets de grande envergure et complexes posent des obstacles importants. Afin de résoudre le problème du chargement des dépendances des modules, AMD, CMD et COMMONJS sont apparus pour le client (il existe également des différences entre les deux, qui seront discutées plus tard) et COMMONJS pour le serveur. Après l'émergence d'es6, le module a été défini comme une fonction, et la mise en œuvre est assez simple, il peut remplacer complètement les spécifications CommonJS et AMD existantes et devenir une solution de module universelle pour les navigateurs et les serveurs.
Exemples d'utilisation : export (throw) import (introduction) export default (lorsque d'autres modules chargent ce module, la commande d'importation peut spécifier n'importe quel nom pour la fonction anonyme)

Recommandations associées :

Modularisation JS-RequireJS

programmation modulaire javascript (réimprimé), tutoriel modularisation javascript_PHP

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!