Module pattern en Javascript

Dans ce cours vous allez découvrir comment mettre en oeuvre le pattern 'module' en Javascript. Ce pattern, plutôt simple à mettre en oeuvre, est une bonne pratique pour structurer son code.

a marqué ce sujet comme résolu.

Bonjour à tous,

J'ai commencé (il y a 4 jours, 4 heures) la rédaction d'un tutoriel dont l'intitulé est Module pattern en JavaScript.

J'aimerai obtenir un maximum de retour sur celui-ci, sur le fond ainsi que sur la forme, afin de proposer en validation un texte de qualité.

Si vous êtes interessé, cliquez ci-dessous

Merci d'avance pour votre aide

+0 -0

Salut !

Je vais jeter un œil à ton travail, et je reviens éditer ce message d'ici demain pour le retour  ;)

Je vais commencer par relever une chose : je trouve surprenant de voir un fervent défenseur du langage et de ses bonnes pratiques ne pas utiliser JavaScript  :D
D'ailleurs, utilise partout la même casse. Tu as mis la majuscule dans le titre et au début, puis dans les extraits, elle disparaît.

Ensuite, je me permets de relever les choses une à une, en vrac les corrections de forme et propositions de modification du fond.

Je fais un brève rappel […]

« […] un bref rappel […] ». Voulais-tu parler initialement de récapitulation ?

Il est vivement déconseillé de ne pas utiliser le mot clef var

La double négation embrouille (il m'a fallu trois lectures et l'exemple pour finalement comprendre ce que tu souhaitais expliquer), et fait trop lourd, je conseillerais vivement une tournure simplifiée, comme « Il est vivement conseille d'utiliser le mot clef var »
Aussi, peut-être faudrait-il expliquer en quoi c'est mal que les variables soient globales. Je suis assez partisan de faire en sorte qu'on ne fasse pas mal/faux, mais je préfère qu'on sache pourquoi il ne faut pas le faire. Tu pourrais parler de la pollution de l'espace global, du risque d'écrasement des valeurs des variables, par exemple.

La pattern module

Le pattern  ;)

elle est contient la référence vers la variable self

« […] elle contient […] », il y a un mot qui n'a pas disparu avec ce qui a changé par rapport à la version précédente

Tu n'as peut-être pas de chance, mais je suis assez sensible aux répétitions.

Le fonctionnement est similaire aux sous-modules. L'idée est simplement de créer un module parent qui englobera l'ensemble des modules. Le chargement de vos fichiers de modules pouvant intervenir dans un ordre aléatoire, il faut faire attention à bien vérifier l'existence du module parent avant de tenter d'y ajouter un module enfant. Voilà comment procéder pour un module parent se nommant Application : […]

Dans ce bref paragraphe, il y a sept fois le mot "module". Si tu permets, je te propose une variante qui en contient moins, et ça pourrait t'aider si tu souhaitais y faire attention pour le reste de la rédaction.

Le fonctionnement est similaire aux sous-modules : l'idée est simplement de créer un module parent qui englobera l'ensemble des modules enfants. Le chargement de vos fichiers pouvant intervenir dans un ordre aléatoire, il faut faire attention à bien vérifier l'existence du parent avant de tenter d'y ajouter un enfant. Voilà comment procéder pour un parent se nommant Application : […]

La mise en avant des notions de module enfant et module parent peut permettre, par association, de ne plus avoir a utiliser le mot commun aux deux notions.

Sinon, tutoriel très intéressant pour le développeur web que je suis. Je fais attention au mot-clé var, et je commence à introduire les espaces de noms dans mes scripts, mais ce que tu présentes propose une réponse à bien des questions que je me posais par rapport à l'organisation du code. Si tu as en stock d'autres idées pour améliorer la manière de coder en JavaScript, je les lirai très volontiers  ^^

+1 -0

Très intéressant et très bien expliqué !

Par contre, peut-être pourrait-il être judicieux d'expliciter la notion d'encapsulation. Expliquer quelle est la différence entre ces deux codes :

1
2
3
4
5
6
var Module = (function() {
    var self = {};
    self.x = 3;

    return self;
})();

1
2
var Module = {};
Module.x = 3;
+0 -0

Salut Vayel, merci :)

Le tutoriel s'adresse surtout à des programmeurs intermédiaires qui ont déjà de bonnes notions objets. Du coup aller rentrer plus en détail dans la notion d'encapsulation, cela n'aura pas beaucoup d'intérêt pour les lecteurs.

PS : pour ton code ça ne change rien en soit, mais tu perds toute la puissance du module car tu ne pourras pas créer d'attributs et méthodes privées et les utiliser en interne.

EDIT : Comment se passe la validation/correction/mise en ligne ? :)

+0 -0

Honnêtement ça me paraît un peu confus dans les explications.

Ce que tu appelles module, je considère que c'est un espace de nommage (ou namespace, ou package). Si ce n'est pas le cas alors je n'ai rien compris.

Du coup, si j'ai bien pigé, ce paragraphe porte plus à confusion qu'à explication :

il est souvent déroutant lorsqu'on code en JavaScript de ne pas retrouver les mots clefs class, public, private, protected… Ces mots clefs ne font pas parti du langage, mais il existe d'autre moyens pour s'en approcher.

Surtout, surtout !!! le mot-clef class, qui n'a pas grand chose à voir avec un espace de nommage.

En gros, "un adepte de la POO" comme tu le dis, va trouver dans ton cours comment il va pouvoir créer un espace de nommage en JS, et y coller ses fonctions utilitaires. C'est déjà pas si mal en soit, ça évite les saletés en variables globales qu'on trimbale partout, les énormes conflits indébuggables etc.

Par contre, le problème qu'un "adepte de la POO" se pose inévitablement en JS c'est comment créer une classe et l'instancier. Et ça, ton cours n'y répond pas (c'est pas un problème hein ;) ) du coup mieux vaut ne pas parler de classe et d'attributs.

Pour parler Java, ce qu'on a avec ce cours c'est une petite bibliothèque remplie de fonctions statiques. Mais pas la possibilité de créer et instancier des objets.

Pour parler Javascript, quand j'ai lu "mot-clef class" j'ai tapé CTRL-F "prototype" pour chercher où tu en parlais.

Peut-être qu'il faudrait clarifier un peu tout cela.

+0 -0

Effectivement je parle bien de namespace/package mais également de la possibilité de faire facilement une classe statique avec des éléments encapsulés. Cependant il est également possible de créer des objets à partir du module, et cela avec très peu de changements (il suffit juste de retirer le self-invoking). Je ne l'aborde pas car ce n'était pas le but du tutoriel; qui se voulait plus "organisation générale du code".

J'aurais pas du parler de class, cela peut amener le lecteur à se dire qu'on va parler de création d'objets, je le conçois :)

Merci pour ton retour, je vais modifier/supprimer les parties pouvant porter à confusion !

+0 -0

Honnêtement ça me paraît un peu confus dans les explications.

Ce que tu appelles module, je considère que c'est un espace de nommage (ou namespace, ou package). Si ce n'est pas le cas alors je n'ai rien compris.

Javier

C'est l'appellation anglaise "officielle/usuelle" : "Module Pattern".

J'aime bien ce tuto, ça fait plaisir de voir ça :) .

Par contre, tu devrais spécifier dans l'intro que le tuto s'adresse à des gens qui connaissent déjà le JS. Le sous-titre du tuto me semble toutefois un peu trop long ^^ .

+0 -0

Par contre, tu devrais spécifier dans l'intro que le tuto s'adresse à des gens qui connaissent déjà le JS. Le sous-titre du tuto me semble toutefois un peu trop long ^^ .

Je m'en occuperai en même temps que la correction des parties restantes. Ce tuto est bientôt prêt. ;)

+0 -0
Ce sujet est verrouillé.