Comprendre le développement modulaire des compétences Javascript_javascript

Little A est ingénieur front-end au sein d'une équipe de startup et est responsable de l'écriture du programme Javascript du projet.

Conflit de variables globales

Sur la base de sa propre expérience, Xiao A a d'abord extrait certaines fonctions couramment utilisées, les a écrites en tant que fonctions et les a placées dans un fichier public base.js :

Copier le code Le code est le suivant :

var_ = {
$: function(id) { return document.getElementById(id },
); GetCookie : fonction (clé) { ... },
setCookie : function(clé, valeur) { ... }
};

Little A place ces fonctions dans l'objet _ pour éviter les conflits causés par un trop grand nombre de variables globales. Il a dit aux autres membres de l'équipe que si quelqu'un souhaitait utiliser ces fonctions, il lui suffisait d'importer base.js.

Little C est un collègue de Little A. Il a rapporté à Little A : Sa page a introduit une bibliothèque de classes appelée underscore.js, et cette bibliothèque de classes occupera également la variable _ globale, elle suivra donc _ dans la base. js conflits. Little A s'est dit que underscore.js est une bibliothèque tierce et qu'elle est probablement difficile à modifier, mais base.js a été déployé sur de nombreuses pages et il est impossible de le modifier. Au final, Little A n'a eu d'autre choix que de changer les variables globales occupées par underscore.js.

À cette époque, Little A a découvert que placer toutes les fonctions dans un espace de noms peut réduire la probabilité de conflits de variables globales, mais cela ne résout pas le problème des conflits de variables globales.

Dépendance

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, tels que le composant de commutation d'onglets tabs.js. Ce composant doit appeler des fonctions dans base.js et util.js.

Un jour, les nouveaux collègues Xiao D et Xiao A ont signalé qu'ils avaient référencé tabs.js dans la page, mais que la fonction n'était pas normale. Little A a découvert le problème au premier coup d'œil. Il s'est avéré que Little D ne savait pas que tabs.js dépend de base.js et util.js, et il n'a pas ajouté de références à ces deux fichiers. Alors, il a immédiatement apporté des modifications :

Copier le code Le code est le suivant :

Cependant, la fonction était encore anormale. A cette époque, Little A enseignait à Little D : « On dit qu'elle est dépendante, donc la partie dépendante doit être placée avant la partie de confiance. Il s'avère que Xiao D a mis base.js et util.js après tabs.js.

Petit A s'est dit qu'en tant qu'auteur, il connaît naturellement les dépendances des composants, mais c'est difficile pour les autres de le dire, surtout les nouveaux arrivants.

Après un certain temps, Xiao A a ajouté une fonction au composant de changement d'onglet. Afin de réaliser cette fonction, tabs.js doit également appeler la fonction dans ui.js. À ce moment-là, Little A a découvert un problème sérieux. Il devait ajouter des références à ui.js sur toutes les pages qui appelaient tabs.js ! ! !

Après un certain temps, Xiao A a optimisé tabs.js. Ce composant ne dépend plus de util.js, il a donc supprimé les références à util.js dans toutes les pages qui utilisent tabs.js. Sa modification a posé un gros problème. L'équipe de test MM lui a signalé que certaines pages étaient anormales. Little A a jeté un coup d'œil et s'est soudain rendu compte que d'autres fonctions de certaines pages utilisaient des fonctions dans util.js. Il a supprimé la référence à ce fichier et une erreur s'est produite. Pour assurer un fonctionnement normal, il a restauré le code.

Petite réflexion encore, y a-t-il un moyen de modifier les dépendances sans modifier les pages une à une, sans affecter les autres fonctions ?

Modulaire

Lorsque Little A naviguait sur Internet, il a accidentellement découvert une nouvelle méthode de codage modulaire qui pourrait résoudre tous les problèmes qu'il avait rencontrés auparavant.

En 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 :

Copier le code Le code est le suivant :

définir (fonction (exiger, exportations, module) {
exports.$ = function(id) { return document.getElementById(id };
); exports.getCookie = function(key) { ... };
exports.setCookie = function(clé, valeur) { ... };
});

Les interfaces fournies par base.js sont ajoutées à l'objet exports. Les exportations sont une variable locale, et le code de l'ensemble du module n'occupe pas la moitié de la variable globale.

Comment appeler l'interface fournie par un certain module ? Prenons tabs.js comme exemple, cela dépend de base.js et util.js :

Copier le code Le code est le suivant :

définir (fonction (exiger, exportations, module) {
var _ = require('base.js'), util = require('util.js');
var div_tabs = _.$('tabs');
// .... Autres codes
});

Un module peut obtenir les interfaces d'autres modules via la fonction locale require. À l'heure actuelle, les variables _ et util sont toutes deux des variables locales et les noms des variables sont entièrement contrôlés par le développeur. Si vous n'aimez pas _, vous pouvez également utiliser base :
.

Copier le code Le code est le suivant :

définir (fonction (exiger, exportations, module) {
var base = require('base.js'), util = require('util.js');
var div_tabs = base.$('tabs');
// .... Autres codes
});

Une fois que vous souhaitez supprimer util.js et ajouter ui.js, modifiez simplement tabs.js :

Copier le code Le code est le suivant :

définir (fonction (exiger, exportations, module) {
var base = require('base.js'), ui = require('ui.js');
var div_tabs = base.$('tabs');
// .... Autres codes
});

Chargeur

En raison du manque de support natif du navigateur, si nous voulons coder de manière modulaire, nous devons utiliser quelque chose appelé un chargeur.

Il existe actuellement de nombreuses implémentations de chargeurs, tels que require.js et seajs. La bibliothèque de classes JRaiser possède également son propre chargeur.