Xiao A est un ingénieur frontal d'une certaine équipe entrepreneuriale, responsable de la rédaction de programmes JavaScript du projet.
Conflit variable global
Selon sa propre expérience, Xiao a d'abord extrait certaines fonctions couramment utilisées et les a écrites dans des fonctions et les a placées dans une base de fichiers public.js:
La copie de code est la suivante:
var _ = {
$: function (id) {return document.getElementById (id); },
getcookie: function (key) {...},
setcookie: fonction (clé, valeur) {...}
};
Xiao A met ces fonctions dans l'objet _ pour empêcher trop de variables globales de provoquer des conflits. Il a dit au reste de l'équipe que si quelqu'un voulait utiliser ces fonctions, introduisez simplement Base.js.
Xiao C est le collègue de Xiao A. Il a déclaré à Xiao A: Sa page a introduit une bibliothèque de classe appelée sous-plan.js, et cette bibliothèque de classe occupera également cette variable globale, qui entrera en conflit avec le "base.js". Xiao une pensée pour se souligner.js est une bibliothèque tierce et il est probablement difficile à modifier, mais Base.js a été réparti sur de nombreuses pages et il est impossible de le modifier. En fin de compte, Xiao A n'avait pas d'autre choix que de changer la variable globale occupée par soulignement.js.
À l'heure actuelle, Xiao a constaté que la mise en place des fonctions dans un espace de noms peut réduire la probabilité de conflits variables globaux, mais il ne résout pas le problème des conflits variables globaux.
compter sur
Avec le développement de l'entreprise, Xiao A a écrit une série de bibliothèques de fonctions et de composants d'interface utilisateur, telles que les onglets de composants de commutation de balise, qui nécessitent des fonctions d'appel dans base.js et util.js.
Un jour, le nouveau collègue Xiao D et Xiao a rapporté qu'il avait cité des tabulations. Xiao a trouvé le problème en un coup d'œil. Il s'est avéré que Xiao D ne savait pas que Tabs.js s'appuyait sur Base.js et util.js, il n'a donc pas ajouté de références à ces deux fichiers. Il a donc immédiatement apporté des changements:
La copie de code est la suivante:
<script src = "tabs.js"> </ script>
<script src = "base.js"> </ script>
<script src = "util.js"> </ script>
Cependant, la fonction est encore anormale. À l'heure actuelle, Xiao a enseigné Xiao d une leçon: "Tout le monde a dit que c'était une dépendance, donc la partie dépendante doit être placée devant la partie dépendante." Il s'avère que Xiao d a mis Base.js et util.js After Tabs.js.
Xiao une pensée qu'il est l'auteur et connaît naturellement la dépendance des composants, mais il est difficile pour les autres de dire, en particulier les nouveaux arrivants.
Après un certain temps, Xiao a des fonctions ajoutées au composant de commutation de balise. Afin d'implémenter cette fonction, Tabs.js doit également appeler des fonctions dans ui.js. À cette époque, Xiao a découvert un problème grave. Il avait besoin d'ajouter des références ui.js à toutes les pages qui ont appelé des tabs.js! ! !
Après un certain temps, Xiao a optimisé Tabs.js, et ce composant ne s'appuie plus sur util.js, il a donc supprimé les références à util.js de toutes les pages qui utilisent des onglets.js pour améliorer les performances. Quelque chose de grand lui est arrivé quand il a apporté la modification. Le MM dans l'équipe de test lui a dit que certaines pages étaient anormales. Lorsque Xiao a l'a vu, il a soudainement réalisé que d'autres fonctions de certaines pages utilisaient des fonctions dans util.js. Il a supprimé la référence à ce fichier et a provoqué une erreur. Afin de s'assurer que la fonction est normale, il a à nouveau restauré le code.
Xiao une réflexion à nouveau, y a-t-il un moyen de modifier les dépendances sans modifier la page un par un et n'affecte pas d'autres fonctions?
Modulaire
Lorsque Xiao A faisait du shopping sur Internet, il a accidentellement découvert une nouvelle méthode de codage modulaire qui peut résoudre tous les problèmes qu'il a rencontrés auparavant.
Dans la programmation modulaire, chaque fichier est un module. Chaque module est créé par une fonction appelée définir. Par exemple, après avoir transformé Base.js en module, le code deviendra comme ceci:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
export. $ = function (id) {return document.getElementById (id); };
export.getCooKie = function (key) {...};
export.setcookie = function (key, value) {...};
});
Toutes les interfaces fournies par base.js sont ajoutées à l'objet Exportations. Les exportations sont une variable locale et le code de l'ensemble du module n'occupe pas la moitié de la variable globale.
Alors, comment appelez-vous l'interface fournie par un certain module? Prendre des onglets.js comme exemple, cela dépend de base.js et util.js:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var _ = require ('base.js'), util = require ('util.js');
var div_tabs = _. $ ('tabs');
// .... d'autres codes
});
Un module peut obtenir les interfaces d'autres modules via la fonction locale requise. À l'heure actuelle, les variables _ et util sont toutes deux des variables locales, et le nom de variable est complètement contrôlé par le développeur. Si vous n'aimez pas _, vous pouvez également utiliser la base:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var base = require ('base.js'), util = require ('util.js');
var div_tabs = base. $ ('tabs');
// .... d'autres codes
});
Une fois que vous souhaitez supprimer util.js et ajouter ui.js, modifiez simplement les tabs.js:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var base = require ('base.js'), ui = require ('ui.js');
var div_tabs = base. $ ('tabs');
// .... d'autres codes
});
Chargeur
En raison du manque de support du navigateur natif, si nous voulons coder de manière modulaire, nous devons compter sur quelque chose appelé chargeur.
Actuellement, il existe de nombreuses implémentations de chargeurs, tels que require.js et seajs. La bibliothèque de classe Jraiser a également son propre chargeur.