Modèle de module JavaScript avec exemple

Question

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

J'aimerais donc savoir si quelqu'un a le temps d'écrire un exemple expliquant comment les modules fonctionnent ensemble.

Answer 1

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

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

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

Les fonctions peuvent être utilisées de deux manières. 1. Déclaration de fonction 2. Expression de fonction.

Nous utilisons ici une expression de fonction.

W Si nous ajoutons l'espace de noms au morceau de code ci-dessus, alors

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

Qu'est-ce que la fermeture en JS ?

Cela signifie que si nous déclarons une fonction avec une variable quelconque à l'intérieur d'une autre fonction (en JS, nous pouvons déclarer une fonction à l'intérieur d'une autre fonction !), cette fonction sera toujours prise en compte. Cela signifie que toute variable dans une fonction extérieure sera toujours lue. Elle ne lira pas la variable globale (s'il y en a une) portant le même nom. C'est également l'un des objectifs de l'utilisation d'un modèle de conception modulaire, qui permet d'éviter 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 cacher l'accessibilité variable au monde extérieur.

J'espère que cela vous aidera. Je vous souhaite bonne chance.

Answer 2

Je recommande vivement à tous ceux qui s'intéressent à ce sujet de lire le livre gratuit d'Addy Osmani :

"Apprendre les modèles de conception JavaScript".

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

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

Answer 3

J'ai pensé développer la réponse ci-dessus en parlant de la manière dont les modules s'intègrent dans une application. J'avais lu cela dans le livre de Doug Crockford, mais étant novice en javascript, cela restait un peu mystérieux.

Je viens d'une formation en c# et j'ai donc ajouté une terminologie que je trouve utile dans ce domaine.

Html

Vous obtiendrez une sorte de fichier html de premier niveau. Il est utile de le considérer comme le fichier de votre projet. Chaque fichier javascript que vous ajoutez au projet doit aller dans ce fichier, malheureusement vous n'avez pas de support d'outil pour cela (j'utilise IDEA).

Vous devez ajouter des fichiers au projet avec des balises script comme ceci :

        <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, il s'agit en fait de quelque chose avec des règles plus folles !

Fichier de l'espace de noms

MasterFile.js

myAppNamespace = {};

c'est tout. Il s'agit simplement d'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).

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. Il s'agit d'une fonction qui renvoie une fonction que nous exécuter immédiatement .

Concepts

Je pense qu'il est utile de considérer la ligne supérieure de SomeComponent comme l'espace de noms dans lequel vous déclarez quelque chose. La seule réserve 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 fait que des pas mineurs avec cela pour le moment (je refais du javascript normal hors d'une application extjs pour pouvoir la tester) mais cela semble assez sympa car on peut 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.

Answer 4

Ici https://toddmotto.com/mastering-the-module-pattern vous trouverez une explication détaillée du modèle. J'ajouterais que la deuxième chose à propos du JavaScript modulaire est la façon de structurer votre code dans plusieurs fichiers. Beaucoup de gens peuvent vous conseiller d'utiliser AMD, mais je peux dire par expérience que vous finirez par avoir des pages lentes à cause des nombreuses requêtes HTTP. La solution consiste à précompiler vos modules JavaScript (un par fichier) dans un seul fichier en suivant la norme CommonJS. Jetez un coup d'œil aux exemples ici http://dsheiko.github.io/cjsc/

Answer 5

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