!function(){ }() vs (function(){ })()

Question

En examinant une partie du code écrit dans le Javascript de Twitter Bootstrap, il semble qu'ils appellent des fonctions anonymes immédiatement invoquées comme ceci :

!function( $ ) {

     ...

}(window.jQuery || window.ender);

Où j'ai traditionnellement vu cette même chose accomplie de cette façon :

(function($) {

    ...

})(window.jQuery || window.ender);

La première méthode semble un peu compliquée, et je ne suis pas sûr qu'il y ait un avantage ou une raison de procéder de cette façon plutôt que de la seconde ? Notez que je comprends comment cela fonctionne, je cherche à comprendre pourquoi ils ont choisi cette façon de faire.

Answer 1

• Un caractère de moins lors de la minification.
• En ! doit gérer les cas où un autre code JavaScript est concaténé avant celui-ci et ne comporte pas de point-virgule de fin.

Il n'y a pas une grande différence. J'utiliserais ce avec quoi vous êtes le plus à l'aise. Vous devriez probablement jeter quelque chose au début de votre exemple pour éviter...

base.js

var lol = function() {
   alert(arguments[0]);
}

im-concat-to-base.js

(function() {
    // Irrelevant.
})();

jsFiddle .

Ajoutez-y un chef de file ; et elle travaille...

jsFiddle .

...ou un ! comme le Twitter Bootstrap...

jsFiddle .

Answer 2

Ce sont deux façons de dépasser l'ambiguïté de la grammaire. Aucune n'est plus "bidouilleuse" que l'autre. C'est juste un choix de style.

Vous pouvez aussi faire ça :

0 + function( $ ) {
  // ...
} ( window.jQuery || window.ender );

Ou :

parseInt(function( $ ) {
  // ...
} ( window.jQuery || window.ender ) );

Answer 3

Une réponse que je n'ai pas encore vue est qu'elle évite d'entourer toute votre fonction de parenthèses. En dehors des considérations esthétiques, cela peut être un plus pour certains éditeurs qui utilisent les parenthèses pour déterminer le niveau d'indentation d'une ligne.

Answer 4

Au lieu de l'étape d'évaluation de !undefined vous pourriez également utiliser le void pour lever l'ambiguïté :

void function($) {
     ...
}(window.jQuery || window.ender);

Il a une sorte de qualité C ;-)