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

Question

Al revisar parte del código escrito en el Javascript de Bootstrap de Twitter, parece que están llamando inmediatamente a las funciones anónimas como esta:

!function( $ ) {

     ...

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

Donde tradicionalmente he visto lo mismo logrado de esta manera:

(function($) {

    ...

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

La primera forma parece un poco hacky, y no estoy seguro de si hay algún beneficio o razón para hacerlo de esta manera en lugar de la segunda forma. Tenga en cuenta que entiendo cómo funciona, estoy buscando entender por qué eligieron esa forma de hacerlo.

Answer 1

• Un carácter menos cuando se minifica.
• los ! Debe manejar dónde se concatena otro código JavaScript antes de esto y no tiene un semicolón final.

No hay una gran diferencia. Usaría lo que fuera más cómodo. Probablemente deberías tirar algo al comienzo de tu ejemplo para evitar ...

base.js

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

iM-Concat-to-Base.js

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

jsfiddle.

Tirar un liderazgo ; Y ella trabaja ...

jsfiddle.

... o un ! Como la bootstrap de Twitter ...

jsfiddle.

Answer 2

Ambas son formas de superar la ambigüedad en la gramática. Tampoco es más "hacky" que el otro. Es solo una elección de estilo.

También podrías hacer esto:

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

O:

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

Answer 3

En lugar del paso de evaluación de !undefined También podrías usar el void operador para eliminar la ambigüedad:

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

Tiene una especie de calidad C ;-)

Answer 4

Una respuesta que aún no he visto es que evita rodear toda su función con paréntesis. Fuera de las consideraciones estéticas, esto puede ser una ventaja para algunos editores que usan paréntesis para determinar el nivel de sangría de una línea.