español - ¿Qué hace! Function($){$(function(){})}(window.jQuery) do?

jquery function

Question

Estoy usando Twitter bootstrap para crear un sitio y estaba tratando de inicializar información sobre herramientas. Además de agregar algo como:

$("[rel=tooltip]").tooltip() en application.js, a menos que conserve, el siguiente fragmento de código utilizado en los documentos de arranque, mis tooltips no se inicializan.

!function ($) { $(function(){ }) }(window.jQuery)

¿Qué hace el código anterior?

Answer 1

Vamos a explicar al desglosar el código

function () {
}()

O a menudo escrito como

(function () {
})()

Es una función self-invoking anonymous autoinvocada , también conocida como expresiones de función invocadas de manera inmediata (IIFE) . Que ejecuta la función anónima en línea inmediatamente.

Lea más sobre esto en Explicar la sintaxis de la función anónima encapsulada .

Las funciones anónimas son una característica poderosa y tienen beneficios como el alcance ("espaciado variable de nombres"), consulte ¿Cuál es el propósito de una función autoejecutable en JavaScript? .

Ahora están usando

function ($) {

}(window.jQuery)

¡Salteemos el ! por ahora.

Entonces están pasando, window.jQuery en esa función como argumento y aceptando como $ .

Lo que hace esto es convertir $ un alias en window.jQuery (Objeto jQuery original) y, por lo tanto, garantizar que $ siempre se refiera al jQuery object dentro de ese closure , sin importar si otra biblioteca ha tomado ese ( $ ) fuera.

Entonces, el código que escriba dentro de ese cierre con $ siempre funcionará.

Otro beneficio es que $ entra como argumento en la función anónima, lo que lo acerca más a la scope chain y, por lo tanto, le toma menos tiempo al intérprete JS encontrar el objeto $ dentro del cierre de lo que de otro modo tomaría si usáramos el indicador global $ .

$(function(){  

})

Es el bloque listo para documentos de jQuery como ya sabrá, lo que asegura que el código dentro de esta función se ejecutará cuando dom is ready , y por lo tanto todos los event binding''s funcionarán correctamente.

Lea más en http://api.jquery.com/ready/

¡Y qué es eso ! ¿Ha sido bien explicado here o en ¿Qué hace el signo de exclamación antes de la función?

En breve:

Para demostrar los beneficios de ! , Vamos a considerar un caso,

(function() {
    alert(''first'');
}())


(function() {
    alert(''second'');
}())

Si pega el código anterior en la console , recibirá dos alertas, pero luego obtendrá este error

TypeError: undefined is not a function

¿Por qué sucede esto? Simulemos cómo los motores JS ejecutan el bloque de código anterior. Ejecuta esta función de function() {alert(''first'');}() anónima function() {alert(''first'');}() muestra la alerta y, como regresa, no se devuelve nada undefined dentro de () . Lo mismo ocurre con la segunda función también. Entonces, después de la ejecución de este bloque, termina teniendo algo así como

(undefined)(undefined)

y como su sintaxis es como una función self-invoking anonymous misma, intenta llamar a esa función, pero la primera, (undefined) no es una función. Por lo tanto, no se undefined is not a function error de undefined is not a function . ! corrige este tipo o errores. ¿Qué pasa con ! . Estoy citando las líneas del enlace de respuesta anterior.

Cuando usa!, La función se convierte en el único operando del operador NOT unario (lógico).

Esto obliga a la función a evaluarse como una expresión, lo que permite que se invoque inmediatamente en línea.

y esto resuelve el problema anterior, ¡podemos reescribir el bloque anterior usando ! me gusta

!(function() {
    alert(''first'');
}())


!(function() {
    alert(''second'');
}())

Para su caso, puede simplemente poner su código de información sobre herramientas dentro de un bloque listo para documentos como este

$(function(){  
    $("[rel=tooltip]").tooltip();  
});

y funcionará bien.

Y si solo usas $("[rel=tooltip]").tooltip() sin ningún doc ready block , entonces hay una posibilidad cuando se ejecutará este código, no hay ningún elemento con rel=tooltip en DOM todavía. Entonces $("[rel=tooltip]") devolverá un conjunto vacío y la tooltip no funcionará.

Un marcado de ejemplo cuando no funcionará sin el doc ready block ,

.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
</script>
.
.
.
.
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>

Como navegadores, interpreta el marcado secuencialmente, ejecutará el código js tan pronto como lo enfrente. Y cuando ejecuta el bloque JS aquí, todavía no ha analizado las etiquetas a a rel="tooltip" , como aparece después del bloque JS, por lo que no están en DOM en ese momento.

Entonces, para el caso anterior, $("[rel=tooltip]") está vacío y, por lo tanto, la información sobre herramientas no funcionará. Por lo tanto, siempre es seguro poner todo su código JS dentro del bloque de document ready como

$(function){
    // put all your JS code here
});

Espero que todo esto tenga sentido para ti ahora.