Salut les loulous,

J'ai besoin de quelques éclaircissements sur le module pattern, et sur ce que je devrais faire avec mon code (que voici : http://jsfiddle.net/Manumanu/3BF3A/ )

J'ai du mal à savoir dans quels cas je devrais utiliser un module pattern ou quand utiliser un simple $(document).ready();.

Par exemple, pour l'envoi de mail, ne serait-il pas préférable de faire une fonction dans un module pattern séparé, puis d'appeler ladite fonction dans un .ready() plus tard ?

Merci d'avance de vos éclaircissements. ;)

PS: Et de manière générale, y a-t-il une façon d'améliorer ce code ? Danke.

Deux choses que je te conseille :

1. nommer tes écouteurs d'events, à l'intérieur du module, ça te permettra de pouvoir rappeller un écouteur pour une raison x ou y.
2. exposer une méthode d'initialisation, que tu vas pouvoir appeller dans un document.ready global.

J'ai forké ton code rapidement pour te montrer le truc : http://jsfiddle.net/mXfzW/
Le module retourne un objet avec une méthode init, qui déclare les events et un truc avec tes onglets, si je me rappelle bien. Dans ton document.ready global, tu n'as plus qu'à appeller window.app.module_name.init() (dans le cas de mon exemple).

---
Sinon, et dans la même optique, je te conseillerai de te pencher sur Browserify, qui permet de travailler avec des modules côté client avec la même syntaxe que les modules node.
Ça paraît un peu space à la première lecture de la doc, mais à l'usage, c'est vraiment très intéressant.

Ce sont deux choses bien différentes (ta closure et le document ready).

Dans le cas de la closure, tu admets que ton code est dans une espèce jail (avec éventuellement des données qui proviennent de l'extérieur [jQuery dans ton cas, accessible via $ dans la closure]). Tout ce qui sera généré dans cette closure ne pourra pas impacter des script à l'extérieur (je ne fais pas référence à la gestion du DOM). Une closure est exécutée systématiquement quand le navigateur la lit.

(function() {
console.log("1");
})();

console.log("2");

Résultat : 1 2

La différence majeur avec $(document).ready(), outre le fait que dans ton ready, tu vas passer une fonction anonyme, c'est que c'est un évènement du DOM qui va déclancher son exécution.

Je n'utilise plus $(document).ready() dans la mesure où mes JS sont placés en fin de code html, ainsi mon DOM est chargé quand il est exécuté. Par ailleurs, webkit fait un peu chier avec le déclenchement de cet évènement quand il s'agit d'images [pas de référence sous la main].

Mes JS sont *toujours* placés en fin de code html, mais j'ai eu des cas relativement abstraits et imprévisibles ou le DOM n'était pas "ready" malgré tout... du coup, je préfère continuer à initier mes scripts dans un document.ready, par simple mesure de sécurité.

Merci à vous deux ; je comprend un peu mieux de quoi il retourne. Et merci Lisarael pour le code, je vois bien l'organisation du truc.

Une question par rapport à ce code, d'ailleurs : Le window.app.module_name, c'est quoi exactement ? Quelle est la différence avec un simple nom de fonction ?

Merci encore

C'est ce qu'on appelle en javascript un "namespace" (terme qui a une toute autre valeur ailleurs qu'en js, mais bref).

Le truc avec javascript, c'est qu'il est extrêmement facile (et tout aussi dangereux) de créer des variables globales, qui vont littéralement "polluer" l'espace global, et qui peuvent générer de très, très gros bugs en fonction de l'ampleur de ton code, bugs assez difficiles à déceler si tu n'es pas trop au fait du scope assez particulier de javascript.

Pour éviter ça, donc, on recommande aux développeurs d'éviter au maximum les variables globales, notamment en utilisant les fonctions auto-appellées, qui sont des closures un peu spéciales, que tu appelles, par un abus de langage qui n'est pas vilain, des modules (pasqu'au fond... c'est quand même un peu ça).

Malgré tout, y a des moments ou t'as pas le choix, et où c'est bien d'avoir une ou deux variables globales, notamment pour la communication entre modules, et de la config venant du serveur au chargement, ou toute autre raison.

Dans ce cas, toujours afin d'éviter la pollution du scope global, on passe par un "namespace" : une seule variable globale, que tu déclares au tout début de ton script, et qui va devenir le "conteur" global de tes valeurs :

window.app = {};
// ...
window.app.foo = "bar";

Par convention, on appelle ce namespace "app", ou par le nom de ton site/application.

Voilà, voilà

D'accord, je connaissais le principe des namespaces pour avoir bossé en C#, mais je n'avais pas fais le rapprochement.

En tout cas, ça a tendance à rendre http://jscompress.com/ complètement con, qui me dit qu'il y a un "." inattendu. Rien de bien grave.

Merci très beaucoup. ;)

C'est ma faute, j'ai fait une erreur d'inattention incroyable :

var window.app.module_name = ...

Le var n'a aucun sens ET est une erreur. J'sais pas trop d'où il sort.
C'est juste comme ça :

window.app.module_name = ...

D'accord. Je note pour ne pas faire l'erreur moi-même.