Modèle de module JavaScript avec exemple [fermé]

Je ne trouve pas d'exemples accessibles montrant comment deux (ou plus) modules différents sont connectés pour fonctionner ensemble.

Alors, je voudrais demander si quelqu'un a le temps d'écrire un exemple expliquant comment les modules fonctionnent ensemble.

Pour aborder le modèle de conception modulaire, vous devez d'abord comprendre ces concepts:

Expression de fonction immédiatement invoquée (IIFE):

(function() {
      // Your code goes here 
}());

Vous pouvez utiliser les fonctions de deux manières. 1. Déclaration de fonction 2. Expression de fonction.

Voici l'utilisation de l'expression de fonction.

Qu'est-ce que l'espace de noms? Maintenant, si nous ajoutons l'espace de noms au morceau de code ci-dessus, alors

var anoyn = (function() {
}());

Qu'est-ce que la fermeture dans JS?

Cela signifie que si nous déclarons une fonction avec une portée variable / à l'intérieur d'une autre fonction (dans JS, nous pouvons déclarer une fonction dans une autre fonction!), Alors cela comptera toujours cette portée de fonction. Cela signifie que toute variable de la fonction externe sera toujours lue. Il ne lira pas la variable globale (le cas échéant) avec le même nom. C'est également l'un des objectifs de l'utilisation d'un modèle de conception modulaire évitant les conflits de noms.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Nous allons maintenant appliquer ces trois concepts que j'ai mentionnés ci-dessus pour définir notre premier modèle de conception modulaire:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle pour le code ci-dessus.

L'objectif est de cacher l'accessibilité variable du monde extérieur.

J'espère que cela t'aides. Bonne chance.

Je recommanderais vraiment à quiconque abordant ce sujet de lire le livre gratuit d'Addy Osmani:

"Apprentissage des modèles de conception JavaScript".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Ce livre m'a énormément aidé lorsque j'ai commencé à écrire du JavaScript plus maintenable et je l'utilise toujours comme référence. Jetez un œil à ses différentes implémentations de modèles de modules, il les explique très bien.

J'ai pensé développer la réponse ci-dessus en expliquant comment vous intégriez des modules dans une application. J'avais lu à ce sujet dans le livre de Doug Crockford, mais étant nouveau en javascript, tout était encore un peu mystérieux.

Je viens de fond ac # donc j'ai ajouté une terminologie que je trouve utile à partir de là.

HTML

Vous aurez une sorte de fichier html de premier niveau. Il est utile de considérer cela comme votre fichier de projet. Chaque fichier javascript que vous ajoutez au projet veut y entrer, malheureusement vous n'obtenez pas de support pour cela (j'utilise IDEA).

Vous devez ajouter des fichiers au projet avec des balises de script comme celle-ci:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Il semble que le fait de réduire les balises fasse échouer les choses - alors que cela ressemble à xml, c'est vraiment quelque chose avec des règles plus folles!

Fichier d'espace de noms

MasterFile.js

myAppNamespace = {};

c'est tout. C'est juste pour ajouter une seule variable globale pour le reste de notre code. Vous pouvez également déclarer des espaces de noms imbriqués ici (ou dans leurs propres fichiers).

Modules)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

Ce que nous faisons ici, c'est attribuer une fonction de compteur de messages à une variable dans notre application. C'est une fonction qui renvoie une fonction que nous exécutons immédiatement .

Concepts

Je pense qu'il est utile de penser à la ligne supérieure de SomeComponent comme étant l'espace de noms où vous déclarez quelque chose. La seule mise en garde à cela est que tous vos espaces de noms doivent d'abord apparaître dans un autre fichier - ce ne sont que des objets enracinés par notre variable d'application.

Je n'ai pris que des mesures mineures avec cela pour le moment (je suis en train de refactoriser du javascript normal à partir d'une application extjs afin de pouvoir le tester) mais cela semble assez agréable car vous pouvez définir de petites unités fonctionnelles tout en évitant le bourbier de `` this » .

Vous pouvez également utiliser ce style pour définir des constructeurs en renvoyant une fonction qui renvoie un objet avec une collection de fonctions et en ne l'appelant pas immédiatement.

Ici https://toddmotto.com/mastering-the-module-pattern, vous pouvez trouver le modèle expliqué en détail. J'ajouterais que la deuxième chose à propos du JavaScript modulaire est de savoir comment structurer votre code en plusieurs fichiers. Beaucoup de gens peuvent vous conseiller ici d'utiliser AMD, mais je peux dire par expérience que vous vous retrouverez sur un certain point avec une réponse de page lente en raison de nombreuses requêtes HTTP. La solution est la pré-compilation de vos modules JavaScript (un par fichier) en un seul fichier suivant la norme CommonJS. Jetez un œil à des exemples ici http://dsheiko.github.io/cjsc/

Vous pouvez trouver le modèle de module JavaScript ici http://www.sga.su/module-pattern-javascript/