javascript - bootstrap - ! function(){}() vs(función(){})()

util.js bootstrap download

Question

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

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

Donde tradicionalmente he visto esto 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 manera de hacerlo.

Answer 1

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

También puedes hacer esto:

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

O:

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

Answer 2

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

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

Tiene un tipo de calidad C para él ;-)

Answer 3

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

Answer 4

• Un personaje menos cuando se minimiza.
• El ! debería manejar dónde otro código JavaScript se concatena antes de esto y no tiene un punto y coma al final.

No hay una gran diferencia. Usaría cualquier cosa con la que te sientas más cómodo. Probablemente deberías lanzar algo al comienzo de tu ejemplo para evitar ...

base.js

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

im-concat-to-base.js

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

jsFiddle .

Mezcle en un líder ; y ella trabaja ...

jsFiddle .

... o a ! como el Twitter Bootstrap ...

jsFiddle .