Programmation modulaire JavaScript (1) : Comment écrire des modules

À mesure que les sites Web deviennent progressivement des « applications Internet », les codes Javascript intégrés dans les pages Web deviennent de plus en plus volumineux et complexes.

Les pages Web ressemblent de plus en plus à des programmes de bureau, nécessitant une division du travail d'une équipe, une gestion de la progression, des tests unitaires, etc... Les développeurs doivent utiliser des méthodes d'ingénierie logicielle pour gérer la logique métier des pages Web.

Modularisation JavaScriptLa programmation est devenue un besoin urgent. Idéalement, les développeurs n'ont besoin que d'implémenter la logique métier de base, et d'autres modules peuvent être chargés par d'autres.

Cependant, Javascript n'est pas un langage de programmation modulaire. Il ne prend pas en charge les « classes », encore moins les « modules ». (La sixième édition du standard ECMAScript, en cours de formulation, prendra officiellement en charge les « classes » et les « modules », mais sa mise en pratique prendra beaucoup de temps.)

La communauté Javascript a fait beaucoup d'efforts pour améliorer l'existant Dans l'environnement d'exécution, l'effet de « module » est réalisé. Cet article résume les meilleures pratiques actuelles de « programmation modulaire Javascript » et explique comment les mettre en pratique. Bien qu'il ne s'agisse pas d'un didacticiel d'introduction, vous pouvez le comprendre à condition d'avoir un peu de compréhension de la syntaxe de base de Javascript.

1. Écriture originale

Un module est un ensemble de méthodes permettant de mettre en œuvre des fonctions spécifiques.

Tant que différentes fonctions (et variables qui enregistrent l'état) sont simplement assemblées, cela devient un module.

function m1(){
　　//...
}
function m2(){
　　//...
}

Les fonctions ci-dessus m1() et m2() forment un module. Lorsque vous l'utilisez, appelez-le directement.

Les inconvénients de cette approche sont évidents : elle "pollue" les variables globales, il n'y a aucune garantie que les noms de variables n'entreront pas en conflit avec d'autres modules, et il n'y a pas de relation directe entre les membres du module.

2. Écriture d'objet

Afin de résoudre les lacunes ci-dessus, le module peut être écrit comme un objet, et tous les membres du module sont placés dans cet objet.

　　var module1 = new Object({
　　　　_count : 0,
　　　　m1 : function (){
　　　　　　//...
　　　　},
　　　　m2 : function (){
　　　　　　//...
　　　　}
　　});

Les fonctions ci-dessus m1() et m2() sont encapsulées dans l'objet module1. Lorsqu'il est utilisé, les propriétés de cet objet sont appelées.

module1.m1();

Cependant, cette façon d'écrire exposera tous les membres du module, et l'état interne pourra être réécrit en externe. Par exemple, un code externe peut modifier directement la valeur d'un compteur interne.

module1._count = 5;

3. Comment écrire une fonction immédiatement exécutée

L'utilisation de "l'expression de fonction immédiatement invoquée (IIFE)" peut atteindre l'objectif de ne pas exposer les membres privés.

　　var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

En utilisant la méthode d'écriture ci-dessus, le code externe ne peut pas lire la variable interne _count.

console.info(module1._count); //undefined

module1 est la méthode d'écriture de base du module Javascript. Ensuite, nous traiterons cette méthode d'écriture.

4. Mode d'amplification

Si un module est très volumineux et doit être divisé en plusieurs parties, ou qu'un module doit hériter d'un autre module, alors il est nécessaire d'utiliser le "mode d'augmentation" .

　　var module1 = (function (mod){
　　　　mod.m3 = function () {
　　　　　　//...
　　　　};
　　　　return mod;
　　})(module1);

Le code ci-dessus ajoute une nouvelle méthode m3() au module module1, puis renvoie le nouveau module module1.

5. Mode d'augmentation lâche (Augmentation lâche)

Dans l'environnement du navigateur, chaque partie du module est généralement obtenue à partir d'Internet, et il est parfois impossible de savoir quelle partie sera chargée d'abord. Si la méthode d'écriture de la section précédente est utilisée, la première partie exécutée peut charger un objet vide inexistant, auquel cas le "mode élargissement" doit être utilisé.

　　var module1 = ( function (mod){
　　　　//...
　　　　return mod;
　　})(window.module1 || {});

Par rapport au « mode zoom avant », le « mode grand grossissement » signifie que les paramètres de la « fonction d'exécution immédiate » peuvent être des objets vides.

6. Variables globales d'entrée

L'indépendance est une caractéristique importante du module. Il est préférable de ne pas interagir directement avec d'autres parties du programme à l'intérieur du module.

Afin d'appeler des variables globales à l'intérieur d'un module, d'autres variables doivent être explicitement saisies dans le module.

　　var module1 = (function ($, YAHOO) {
　　　　//...
　　})(jQuery, YAHOO);

Le module module1 ci-dessus doit utiliser la bibliothèque jQuery et la bibliothèque YUI, donc ces deux bibliothèques (en fait deux modules) sont entrées dans module1 en tant que paramètres. En plus de garantir l'indépendance des modules, cela rend également évidentes les dépendances entre modules. Pour plus d'informations à ce sujet, consultez le célèbre article de Ben Cherry "JavaScript Module Pattern: In-Depth".

La deuxième partie de cette série expliquera comment organiser différents modules et gérer les dépendances entre les modules dans l'environnement du navigateur.

Ce qui précède est le contenu de la programmation modulaire JavaScript (1) : comment écrire des modules Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !