Pourquoi le front-end devrait-il utiliser la modularité ?

Cette fois, je vous explique pourquoi le front-end devrait utiliser la modularisation ? , quelles sont les précautions pour la modularisation front-end Ce qui suit est un cas pratique, jetons un oeil.

À quoi font référence les spécifications CMD, AMD et CommonJS ? Quelles applications existe-t-il ?

AMD (Asynchronous Module Definition) spécifie un mécanisme sous lequel les modules et les dépendances peuvent être chargés étape par étape. Cela est particulièrement vrai pour le chargement asynchrone côté navigateur, qui est également une extension de la spécification CommonJS. 12

Syntaxe

define(id?, dependencies?, factory); 1

id : Le nom du module dans la définition, facultatif ; if Si ce paramètre n'est pas fourni, le nom du module doit être par défaut le nom du script spécifié demandé par le chargeur de module. .

Dépendances : il s'agit d'un littéral de tableau dont dépend le module actuel et qui est identifié par le module défini par le module. Le paramètre de dépendance est facultatif, si ce paramètre est omis, il doit être par défaut ["require", "exports", "module"]. Cependant, si l'attribut length de la méthode factory est inférieur à 3, le chargeur choisira d'appeler la méthode factory avec le nombre d'arguments spécifié par l'attribut length de la fonction.

Factory méthode factory : Le module initialise la fonction ou l'objet à exécuter. S'il s'agit d'une fonction, elle ne doit être exécutée qu'une seule fois. S'il s'agit d'un objet, cet objet doit être la valeur de sortie du module.
Exemples

define('modal', ['jQuery', 'dialog'], function($, Dialog){$('.modal').show();
Dialog.open();
});1234

Les bibliothèques AMD incluent RequireJS, curl, Dojo, etc. CommonJS est une spécification pour les modules côté serveur, et Node.js adopte cette spécification. Node.JS a d'abord adopté le concept de modularité js. Dans un module, il y a une variable libre "require", qui est une fonction. La fonction "require" reçoit un identifiant de module. "require" renvoie l'API exportée par le module externe. Si un cycle de dépendances se produit, le module externe peut ne pas avoir terminé son exécution lorsque ses dépendances transitives l'exigent ; dans ce cas, l'objet renvoyé par "require" doit contenir au moins la sortie qui a été préparée avant d'appeler la fonction require (qui sera entrer dans l'environnement d'exécution du module actuel). Si le module demandé ne peut pas être renvoyé, alors « require » doit générer une erreur. Dans un module, il y aura une variable libre nommée "exports", qui est un objet auquel le module pourra ajouter sa propre API lors de l'exécution. Les modules doivent utiliser l'objet "exports" comme seule représentation de la sortie.
Exemple

exports.add = function() {
  var sum = 0, i = 0, args = arguments, l = args.length;  while (i < l) {
      sum += args[i++];
  }
  return sum;
};1234567

CMD (Common Module Definition) est généré lors de la promotion de SeaJS.

CMD a été proposé par Yu Bo en Chine. Sa principale différence par rapport à la spécification AMD réside dans la partie de définition du module et d'introduction des dépendances. AMD doit spécifier toutes les dépendances lors de la déclaration du module et les transmettre au module via des paramètres formels
Exemple

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});123456789

Par rapport au module AMD, CMD est plus proche de la définition de Node de la spécification CommonJS :

define(factory);1

Dans la section dépendance, CMD prend en charge l'introduction dynamique, l'exemple est le suivant :

define(function(require , exports , module){    //the module code goes here
});123

require, exports, module sont transmis via des paramètres formels. Pour les modules, lorsque vous devez dépendre du module, vous pouvez appeler le module pour l'importer à tout moment.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles liés !

Lecture recommandée :

Méthodes de test des pages frontales

Application d'appel et candidature en 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!