Instructions d'utilisation modulaires JS pour les programmeurs back-end

Cette fois, je vais vous apporter des instructions sur l'utilisation de la modularisation JS pour les programmeurs back-end. Quelles sont les précautions pour que les programmeurs back-end utilisent la modularisation JS. Voici des cas pratiques, jetons un coup d'œil.

Mode de base

Fermeture anonyme

La fermeture anonyme est une méthode d'isolation de code très courante, qui déclare des objets anonymes et les exécute immédiatement. Les variables et méthodes déclarées dans la fonction anonyme et la fonction anonyme elle-même ne pollueront pas l'extérieur de la fonction. En même temps, l'appel de la fonction anonyme forme une fermeture, afin que le corps de la fonction puisse. utiliser la fonction déclarée en dehors du corps Variables et méthodes.

(function () {    // ... all vars and functions are in this scope only
    // still maintains access to all globals}());

Importation globale

Nous savons que JavaScript la portée globale des variables s'étend dans le monde entier et peut également être utilisée ou même déclaré dans une fonction, ce qui peut facilement conduire à une confusion dans le code et à des difficultés de gestion.
Le mode d'importation global est une variante de la fermeture anonyme. Il ajoute des paramètres pour importer des variables globales. Il est convenu que les modules externes ne sont accessibles que via des paramètres importés à l'intérieur de la fonction anonyme, rendant ainsi les dépendances entre modules claires et faciles à gérer. .

(function ($, YAHOO) { // ont désormais accès aux globaux jQuery (en $) et YAHOO dans ce code}(jQuery, YAHOO));

Cette convention ne peut pas être appliquée Pour empêcher l'accès aux variables globales dans le corps de la fonction, une solution consiste à traiter tous les modules de cette manière et à exporter uniquement le module lui-même vers des variables globales, ce qui peut réduire considérablement l'utilisation de variables globales.

Export de module

L'export de module consiste à renvoyer et affecter le résultat de l'exécution immédiate de la fonction anonyme à une variable globale. Les fonctions anonymes renvoient uniquement des objets ouverts, et leurs variables et fonctions définies en interne sont toujours invisibles pour le monde extérieur.

var MODULE = (function () {    var my = {},
        privateVariable = 1;    function privateMethod() {        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {        // ...
    };    return my;
}());

Mode avancé

Mode d'extension

Les objets JavaScript prennent en charge l'expansion à chaud. Combiné avec le mode d'importation global, nous pouvons étendre le module.

var MODULE = (function (my) {
    my.anotherMethod = function () {        // added method...
    };    return my;
}(MODULE));

Ce mode suppose que le MODULE a été déclaré. S'il n'est pas déclaré, une erreur se produira.

Mode d'expansion large

Le mode d'expansion large utilise une astuce pour appeler une fonction anonyme et passer MODULE || {} comme paramètre pour résoudre le problème d'erreur d'appel si MODULE n'est pas déclaré à l'avance . Ce mode cache également une chose merveilleuse, c'est-à-dire que plusieurs modes d'extension peuvent être appelés en parallèle sans être bloqués.

var MODULE = (function (my) {    // add capabilities...
    return my;
}(MODULE || {}));

Mode d'expansion serré

Le mode d'expansion large est excellent, mais présente l'inconvénient de surcharger les attributs de la méthode qui ne peuvent pas être gérés en toute sécurité. Le mode d'extension serré conserve les références aux anciennes méthodes et peut réutiliser de manière flexible les fonctions des anciennes méthodes dans les nouvelles méthodes définies.

var MODULE = (function (my) {    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {        // method override, has access to old through old_moduleMethod...
    };    return my;
}(MODULE));

Clonage et héritage

var MODULE_TWO = (function (old) {    var my = {},
        key;    for (key in old) {        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {        // override method on the clone, access to super through super_moduleMethod
    };    return my;
}(MODULE));

Le mode clonage et héritage est presque la méthode de réutilisation de module qui a le moins d'impact sur le module d'origine. Ce mode s'effectue par simple clonage. les propriétés de l'ancien module peuvent être combinées avec le mode d'expansion serré pour résoudre le problème de surcharge de méthode . Il est à noter qu'il s'agit d'une sorte de clonage superficiel Lorsque l'attribut de l'ancien module est un objet, les modifications apportées à cet objet s'affecteront entre l'ancien et le nouveau module.

État privé dans les fichiers

Lorsqu'un module est divisé en plusieurs fichiers, vous trouverez une limitation lors de l'utilisation du mode d'expansion large. Les méthodes de chaque fichier conserveront leur propre état privé et ne pourront pas l'être. utilisé dans le module Partagé dans plusieurs fichiers, l'exemple suivant montre comment partager l'état privé dans le même module dans ce cas.

var MODULE = (function (my) {    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {            delete my._private;            delete my._seal;            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

Chaque fichier conserve une variable locale _private pour le partage avec d'autres modules. Une fois le module chargé, appelez MODULE._seal pour détruire l'attribut d'accès externe de la variable locale _private. Si le module doit être développé, appelez _unseal avant de charger le fichier pour afficher la variable locale _private vers les attributs accessibles en externe. Après le chargement, appelez _seal pour détruire les attributs accessibles en externe.

Sous-module

Le sous-module définit les attributs du module en tant que module et peut utiliser de manière flexible les différents modes mentionnés ci-dessus.

MODULE.sub = (function () {    var my = {};    // ...
    return my;
}());

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser JS pour mettre en œuvre des opérations de chiffrement et de déchiffrement

Comment utiliser JS pour effectuer un transfert de référence et valeur Pass

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!