Comprendre les compétences javascript modularity_javascript

La modularisation est une bonne pratique de programmation courante. La modularisation des programmes nous permet d'utiliser plus facilement le code d'autres personnes et de charger les modules de notre choix pour les fonctions de notre choix, améliorant ainsi l'efficacité de l'utilisation du code et augmentant la vitesse de développement.

Les modules sont comme des éléments de base. Avec eux, nous pouvons créer des programmes avec différentes fonctions et styles. Quelles sont les caractéristiques des blocs de construction ? Petit et simple. De même, les modules de notre programme devraient également le faire, en garantissant que les fonctions que vous créez n'effectuent qu'une seule tâche à la fois, afin que les autres développeurs puissent simplement déboguer et modifier votre code sans avoir à parcourir tout le code pour comprendre chaque étape. Quelle fonction remplit un bloc de code ? Ce n’est qu’en étant petit et simple qu’il pourra remplir sa fonction universelle.

1. Méthode de modularisation JavaScript
1. Encapsulation de fonction
La portée de JavaScript est basée sur les fonctions, nous pouvons donc utiliser des fonctions comme modules.

function fn1(){
  //code
}

function fn2(){
  //code
}

Inconvénients : Variables globales "polluantes", il n'y a aucune garantie que les noms de variables n'entreront pas en conflit avec d'autres modules

2. Objet

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

Inconvénients : tous les membres du module seront exposés et l'état interne peut être écrasé par l'extérieur

Fonction à exécution automatique immédiate - recommandée

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

2.Petit et simple
Concernant le petit et le simple, regardons un exemple. Par exemple, nous voulons maintenant écrire une fonction qui crée un nouveau lien et ajouter une classe pour le lien hypertexte de type "mailto". Vous pouvez faire ceci :

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

Écrire de cette façon peut fonctionner, mais vous constaterez peut-être que vous n'êtes pas autorisé à ajouter d'autres fonctions, cette fonction n'est donc pas applicable. Ainsi, plus la fonction est spécialisée, plus il est difficile de l’appliquer à différentes situations.
La façon dont les fonctions sont écrites ici ne répond pas aux exigences de modularité : une fonction ne fait qu'une seule chose. Adaptons la fonction :

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

La fonction createLink ici ne fait qu'une chose : créer et renvoyer la balise a à ajouter à la page (petite et simple), afin que nous puissions appeler une telle fonction chaque fois que nous avons besoin de créer un lien hypertexte.

3.CommonJS
Dans un environnement de navigateur, le manque 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 la programmation ne se fera pas ; être possible du tout. Bien que JavaScript soit développé sur le Web depuis de nombreuses années, la première spécification modulaire populaire a été apportée par les applications JavaScript côté serveur. La spécification CommonJS a été reprise par NodeJS, qui a marqué l'entrée officielle de la programmation modulaire JavaScript sur scène.
Le système de modules de node.js est implémenté selon la spécification CommonJS. Dans CommonJS, il existe une méthode globale require() pour charger les modules.
Charger le module :

var math = require('math');
Module d'appel :

math.add(2,3)
La spécification CommonJS n'est pas applicable à l'environnement du navigateur car elle présente une limitation majeure. Dans l'exemple ci-dessus, la deuxième ligne de math.add(2, 3) doit être exécutée après le chargement de math.js. et Les modules sont tous placés côté serveur, cela peut donc prendre beaucoup de temps. Le temps d'attente dépend de la vitesse du réseau.

La spécification CommonJS s'applique côté serveur, car pour le côté serveur, 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

.

4. Comment le module doit-il être défini et chargé ?
AMD
Définition du module asynchrone Définition du module asynchrone, représentant principal : require.js
Objectif :
(1) Implémentez le chargement asynchrone des fichiers js pour éviter que la page Web ne réponde
 ; (2) Gérer les dépendances entre les modules pour faciliter l'écriture et la maintenance du code.

1. Définir le module

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2. Charger le module

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
Définition du module commun Définition du module commun, la spécification CMD est développée au niveau national. Représentant principal : sea.js

1. Définir le module

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2. Charger le module

seajs.use("../static/hello/src/main")
Différence :

Pour les modules dépendants, AMD est exécuté en avance et CMD est exécuté en retard. Cependant, à partir de RequireJS 2.0, il a également été modifié pour pouvoir retarder l'exécution (la méthode de traitement est différente selon la méthode d'écriture). CMD recommande d'être aussi paresseux que possible.

CMD favorise les dépendances à proximité, tandis qu'AMD favorise les dépendances à l'avant.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.