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

Lors de l'examen de certains des codes écrits dans le Twitter Bootstrap Javascript, il semble qu'ils invoquent immédiatement des fonctions anonymes comme celles-ci:

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

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

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

La première façon semble un peu piquante, et je ne sais pas s'il y a un avantage ou une raison de le faire de cette façon plutôt que de la deuxième voie? Notez que je comprends comment cela fonctionne, je cherche à comprendre pourquoi ils ont choisi cette façon de le faire.

Un caractère de moins lorsqu'il est minifié.
Le ! Devrait gérer où un autre code JavaScript est concaténé avant celui-ci et n'a pas de point-virgule arrière.

Il n'y a pas une énorme différence. J'utiliserais tout ce dont vous étiez plus à l'aise. Vous devriez probablement lancer 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 .

Lancez une tête ; Et elle travaille …

JsFiddle .

… ou un ! Comme le Twitter Bootstrap …

JsFiddle .

Ils sont les deux moyens de passer l'ambiguïté dans la grammaire. Ni plus "hacky" que l'autre. C'est juste un choix de style.

Vous pourriez également faire ceci:

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

Ou:

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

Au lieu de l'étape d'évaluation de !undefined vous pouvez également utiliser l'opérateur void pour supprimer l'ambiguïté:

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

A une sorte de qualité C 😉

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