Syntaxes des modules en JavaScript et conventions d'écriture

Salut,

À la base du problème on trouve la différence entre :
- une expression : pour simplifier, c'est une valeur (ex: 7, 3+4, true, 'toto', {'a':1, 'b':2, 'c':3}, new MonObjet(), etc.)
- et une déclaration : c'est le fait d'assigner une valeur à une variable. (ex: var toto = '3')

Tu obtiendras un traitement (parfois) différent selon que ta fonction est considérée par l'interpréteur js comme l'une ou l'autre. Explication avec tes exemples, dans le désordre :

function(){  
    // 2 
}();

Par défaut (disons...), le mot function introduit une déclaration de fonction. Donc parsage en tout premier, avant la moindre exécution de code, et enregistrement dans une table de références pour pouvoir être appelée plus tard. Et pour cela, il lui faut bien sûr un nom (sinon comment l'appeler ?...). Donc erreur de syntaxe dans cet exemple.

(function(){  
    // 1 
})();

Les parenthèses ici servent à forcer l'interprétation d'une instruction en tant qu'expression. Une expression peut être tout et n'importe quoi, y compris une fonction (auquel cas elle est exécutable, bien sûr). C'est ce qui se passe ici et tu n'as donc plus d'erreur. Pour l'interpréteur, c'est un peu comme si tu avais écrit :

var toto = function(){...};
toto();

...sauf que là, la fonction étant nommée, elle aurait été enregistrée pour utilisation ultérieure (cf. point précédent).

(function(){  
    // 2 
}());

Ici c'est un peu la même chose qu'au-dessus, sauf que c'est le tout qui est considéré comme une expression (du fait des parenthèses). Le résultat est le même mais je préfère la version précédente qui, à mon sens, indique de manière plus explicite ce que je veux faire de la fonction.

var MODULE = function(){  
    // 1 
}(); 

Par "spécification", tout ce qui se trouve à droite du signe égal ne peut être qu'expression, donc là aussi, pas de risque de déclencher une erreur de déclaration. Même chose que ci-dessus, tu peux aussi choisir de bien marquer, explicitement, que ta fonction doit être traitée comme une expression, et donc préférer cette forme :

var MODULE = (function(){  
    // 1 
})(); 

Et loin de participer à l'orgie de parenthèses, cette paire-là contribue souvent, de plus, à faciliter la lecture.
Modifié par marcv (16 Jul 2010 - 18:01)

Merci monsieur Marc V. pour cette réponse fort détaillée.

Je pense avoir compris la différence expression/déclaration, même si quand on arrive du côté de function ça fait un peu chauffer le cerveau.

OK pour le gain de lisibilité des parenthèses en plus pour les modules nommés. La cohérence avec la syntaxe des modules anonymes est un autre argument qui va bien. J'achète.

(function(){
  // …
})() // Parenthèses «dehors»

(function(){
  // …
}()) // Parenthèses «dedans»

Pour le coup des () dedans ou dehors, j'ai eu deux sons de cloche:
- tu préfères la version dehors, «qui indique de manière plus explicite ce que je veux faire de la fonction» (et ce qu'on veut en faire c'est l'exécuter, donc?);
- pour d'autres, la version dedans «clarifie le fait que ton code retourne une valeur et non la fonction elle même».
On fait un sondage?

Enfin, s'il y a des critiques du «revealing module pattern», et des syntaxes qui vous privilégiez, ça m'intéresse.

Dans tes deux premiers exemples, Module anonyme et Module nommé, les deux syntaxes sont équivalentes. Seul diffère la convention qui, dans sa seconde forme, aide à la compréhension. Elle précise que c'est le résultat de la fonction qui est retourné et non la fonction elle-même. Ce qui est surtout utile lorsque que tu assignes ta fonction auto-exécutée à une variable.

Dans ton troisième exemple, la seconde définition lève une exception parce que tu exprimes une fonction (Function expression) dans un contexte global. En effet, parce que ta fonction est définie au plus haut niveau de ton code (également valable dans le corps d'une autre fonction), le moteur ECMAScript cherche à analyser une déclaration de fonction (Function declaration). Voir la spécification sur la définition de fonctions.
Si tu souhaites utiliser la seconde syntaxe de l'exemple, donc effectuer une expression de fonction, tu as besoin de préciser un contexte. Cela se fait simplement en englobant ton expression de l'opérateur de groupement "(" et ")".

Note que l'exception sera également levée en présence d'une expression de fonction nommée (Named function expression) :

try {
  function foo () {
    return "bar";
  }();
} catch (err) {
  // SyntaxError
}

try {
  (function foo () {
    return "bar"
  }());
} catch (err) {
  // Nothing or prints "bar" to the console of Firebug
}

Bien que plus pratique pour effectuer les séances de debug, l'implémentation de la syntaxe Named function expression est bugguée dans JSCript (IE) et Safari 2.x.


Pour en revenir au sujet de ta question, j'opte pour la syntaxe module nommé, avec la fonction auto-exécutée englobée par des parenthèses : la lecture est plus simple, je sais que ma variable sera initialisée avec le résultat de la fonction anonyme de la partie droite et qu'elle ne l'exécutera pas à chaque appel.

PS : une lecture très intéressante et absolument indispensable pour TOUT savoir sur les subtilités des fonctions en javascript :

http://yura.thinkweb2.com/named-function-expressions/