Comprendre la modularité front-end (CommonJs, AMD et CMD)-js tutoriel-php.cn

Comprendre la modularité front-end (CommonJs, AMD et CMD)

怪我咯

Libérer： 2017-04-05 13:50:15

original

4117 Les gens l'ont consulté

Il existe trois spécifications de modules front-end : CommonJs, AMD et CMD.

CommonJs est utilisé côté serveur, AMD et CMD sont utilisés dans l'environnement du navigateur.

AMD est la sortie standardisée des définitions de modules pendant le processus de promotion de RequireJS.

CMD est le résultat standardisé de la définition du module pendant le processus de promotion de SeaJS.

AMD : Exécution anticipée (chargement asynchrone : les dépendances sont exécutées en premier) + exécution différée

CMD : Exécution différée (exécuter pour charger, exécutée dans l'ordre)

Module

Fonction Écriture

function f1(){
    //...
}
function f2(){
    //...
}

Copier après la connexion

Un module est un fichier qui implémente une fonction spécifique. Il consiste à mettre plusieurs fonctions dans un seul fichier. .un module. Chargez ce fichier si nécessaire et appelez les fonctions qu'il contient.

Mais cela polluerait la variable globale, il n'y a aucune garantie qu'il n'y aura pas de conflit de nom de la variable avec d'autres modules, et il n'y a aucune relation entre les modules membres.

　ObjetÉcriture

var module = {
　　star : 0,
　　f1 : function (){
　　　　//...
　　},
　　f2 : function (){
　　　　//...
　　}
};
module.f1();
module.star = 1;

Copier après la connexion

Le module est écrit en tant qu'objet et les membres du module sont encapsulés dans l'objet en appelant l'objetattribut<. 🎜>, vous pouvez accéder au module membre. Mais en même temps, les membres du module sont exposés et l'état interne du module peut être modifié par le monde extérieur.

Exécuter la fonction immédiatement

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log(&#39;ok&#39;);
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
module.f1();  //ok
console.log(module.star)  //undefined

Copier après la connexion

Impossible d'accéder en externe aux variables privées internes

CommonJs

CommonJS est une spécification pour les modules côté serveur, promue et utilisée par Noeud. En raison de la complexité de la programmation côté serveur, il est difficile d'interagir avec le système d'exploitation et d'autres applications sans modules. L'utilisation est la suivante :

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

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2

Copier après la connexion

Selon la spécification CommonJS :

Un seul fichier est un module. Chaque module a une portée distincte, c'est-à-dire que les variables définies dans le module ne peuvent pas être lues par d'autres modules à moins qu'elles ne soient définies comme attributs de l'objet global.

La meilleure façon d'exporter des variables de module est d'utiliser l'objet module.exports.
Chargez le module en utilisant la méthode require, qui lit un fichier et l'exécute, en renvoyant l'objet module.exports à l'intérieur du fichier

Regardez attentivement le code ci-dessus, vous remarquerez que require est synchrone. Le système de modules doit lire le contenu du fichier de module de manière synchrone, le compiler et l'exécuter pour obtenir l'interface

du module .

Cependant, cela pose de nombreux problèmes du côté du navigateur.

Côté navigateur, le moyen le meilleur et le plus simple de charger JavaScript est d'insérer la balise

Derniers articles par auteur