Javascript: Envolver guión completo en una llamada a la función

Question

he encontré con un par de veces con este fenómeno en JavaScript, donde un guión completo está envuelto en una llamada de función, así:

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

ejemplo del mundo real , del código de cliente de glow.mozilla.com: https://github.com/potch/glow/blob/master/media/glow.js

¿Para qué se utiliza este estilo de codificación? ¿Cuál es la diferencia entre con y sin el estilo de función envolvente y cuándo debería usarse?

Answer 1

Hacerlo de esta manera garantiza que ninguna de las variables/funciones que defina entre en el alcance global. Todos los scripts que incluye en la página comparten el mismo alcance global, por lo que si define dos variables en dos scripts separados con el mismo nombre, en realidad se refieren a la misma variable .

Por ejemplo, suponga que tiene a.js y b.js, que se define como tal:

// a.js 
var node = document.getElementById("something"); 

function frob() { 
    node.style.display = "none"; 
} 

// b.js 
var node = document.getElementById("something-else"); 

Si incluye b.js después a.js en su página, a continuación, cuando se llama a frob que va para ocultar el nodo "algo-otro" en lugar del nodo "algo" como es de esperar.

su lugar, puede hacer algo como:

// a.js 
(function() { 
    var node = document.getElementById("something"); 

    window.frob = function() { 
     node.style.display = "none"; 
    } 
})(); 

// b.js 
(function() { 
    var node = document.getElementById("something-else"); 
})(); 

Y las cosas dentro b.js no va a interferir con lo que hay en a.js.

Tenga en cuenta que en realidad no agregaría funciones directamente en window, sino que haría algo similar a lo que tiene ese script glow.js vinculado: una única variable global que representa mis scripts "namespace". En jQuery, por ejemplo, esa única variable global es $ (o jQuery).