web-dev-qa-db-fra.com

Modèle de module JavaScript avec exemple

Je ne trouve aucun exemple accessible montrant comment deux (ou plus) modules différents sont connectés pour fonctionner ensemble.

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

javascriptmodule
136
Srle

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

Expression de fonction immédiatement appelé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.

Ici, on utilise l'expression de fonction.

Quel est l'espace de noms? Maintenant, si nous ajoutons l'espace de noms à la pièce de code ci-dessus,

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

Qu'est-ce que la fermeture dans JS?

Cela signifie que si nous déclarons une fonction avec n’importe quelle variable scope/dans une autre fonction (dans JS, nous pouvons déclarer une fonction dans une autre fonction!), Alors elle comptera toujours la portée de cette fonction. Cela signifie que toute variable de la fonction externe sera toujours lue. Il ne lira pas la variable globale (le cas échéant) portant le même nom. C’est également l’un des objectifs de l’utilisation d’un modèle de conception modulaire, qui évite 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 les trois concepts 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 masquer la variable accessibilité au monde extérieur.

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

254
kta

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

"Learning JavaScript Design Patterns".

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

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

38
Code Novitiate

Je pensais développer la réponse ci-dessus en expliquant comment intégrer des modules dans une application. J'avais lu à ce sujet dans le livre de Doug Crockford, mais être nouveau dans le langage javascript était encore un peu mystérieux.

Je viens d’un contexte c #, j’ai donc ajouté une terminologie que je trouve utile à partir de là.

Html

Vous aurez une sorte de fichier HTML de premier niveau. Pensez à cela comme à votre fichier de projet. Chaque fichier javascript que vous ajoutez au projet veut entrer dans cela, malheureusement, vous n’obtenez pas le support d’outil pour cela (j’utilise IDEA).

Vous devez ajouter des fichiers au projet avec des balises de script telles que:

        <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 provoque l’échec de certaines choses. Bien que cela ressemble à du XML, c’est vraiment quelque chose avec des règles plus folles!

fichier d'espace de noms

MasterFile.js

myAppNamespace = {};

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

Module (s)

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 assigner une fonction de compteur de messages à une variable de notre application. C'est une fonction qui retourne une fonction que nous exécutons immédiatement.

Concepts

Je pense qu’il est utile de penser à la ligne supérieure dans SomeComponent comme étant l’espace de noms dans lequel vous déclarez quelque chose. Le seul inconvénient est que tous vos espaces de noms doivent d'abord apparaître dans un autre fichier - ce ne sont que des objets enracinés dans notre variable d'application.

Pour le moment, je n’ai pris que des mesures mineures (je suis en train de refacturer du javascript normal à partir d’une application extjs pour 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 - 'ceci'.

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.

19
JonnyRaa

Ici https://toddmotto.com/mastering-the-module-pattern vous pouvez trouver le motif 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 vous conseilleront peut-être d’utiliser AMD, mais je peux affirmer, par expérience, que votre réponse aux pages sera lente à cause de nombreuses requêtes HTTP. La solution consiste à pré-compiler vos modules JavaScript (un par fichier) en un seul fichier selon le standard CommonJS. Regardez des exemples ici http://dsheiko.github.io/cjsc/

6
Dmitry Sheiko