2011-02-13 16 views
43

entiendo cierres de JavaScript, y he visto este hecho en JS nativas:

(function() { 
    // all JS code here 
})(); 

Pero, ¿qué hacer añadiendo la sal jQuery?

(function ($) { 
    // all JS code here 
})(jQuery); 
+0

en este caso $ podría ser cualquier cosa que se convierta en objeto jquery dentro de esta función, $ function (y) {}) (jQuery); –

Respuesta

30

Es una forma de asignación de jQuery para el $ de una manera para que no todos el código en una página lo verá.

Quizás tenga una secuencia de comandos existente que usa jQuery que le gustaría volver a usar pero también utiliza un prototipo que también usa $ en la misma página.

Al envolver cualquier jQuery usando código en esa construcción, redefine $ a jQuery para la parte contenida sin entrar en conflicto con otro código en la página.

+0

Ah, está bien. Genial gracias. – ma11hew28

+6

Esto se conoce como aliasing – zzzzBov

+1

Tenga en cuenta que puede asignar cualquier argumento de esta manera, no solo 'jQuery' a' $ ', valioso para evitar el desplazamiento variable fuera del alcance de la función IIFE. –

47

Cuando vea:

(function() { 
    // all JS code here 
})(); 

Es conoce como auto-invocando función anónima. La función se ejecuta tan pronto como se analiza debido a la adición de () al final (así es como se ejecutan las funciones js).

en cuenta que los apoyos exteriores adicionales son sólo convenciones, también se podría escribir por unos días como:

function() { 
    // all JS code here 
}(); 

Pero esa convención es muy usada por todos lados y que debe atenerse a ella.

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

Aquí, $ se asigna a jQuery objeto para que se puede utilizar en lugar de$jQuery palabra clave. También puede poner algún otro personaje allí también:

(function(j) { 
    // all JS code here 
})(jQuery); 

Aquí, j se asigna a jQuery objeto en su lugar.

Observe también que los argumentos especificados para la función de invocación automática permanecen dentro del alcance de esa función y no entran en conflicto con el ámbito externo/variables.


que había escrito un artículo sobre el tema, por favor, echa un vistazo:

+0

Pero, ¿no es '$' un alias para 'jQuery' de forma predeterminada? – ma11hew28

+0

@MattDiPasquale: Eso es lo que dije en mi respuesta, se hace alias con '(función ($) { // todos los códigos JS aquí }) (jQuery); '............... – Sarfraz

+0

Firebug Console no proporciona mensajes de error detallados de esta manera. Solo estoy recibiendo "Lovers is not defined". – ma11hew28

11

Hay dos razones para pasar jQuery a un cierre de esta manera.

El más significativo es que hace que su código funcione en páginas que usan jQuery's "no conflict" mode, lo que permite el uso de jQuery junto con otras bibliotecas que desean tener control sobre el $ global. Por esta razón, la técnica (function($) { ... })(jQuery) es fuertemente recomendada cuando se escriben los plugins de jQuery.

La razón secundaria es que hace $ una variable local en el alcance de la función autoejecutable y el acceso variable local es (marginalmente) más rápido que el acceso variable global. Personalmente, no considero que esto sea una razón muy convincente: no puedo imaginar un escenario en el que la sobrecarga de usar jQuery en lugar de los métodos DOM sea aceptable, pero el acceso a jQuery como variable global no sería aceptable. :-)

Yo diría que la mejor razón para utilizar esta técnica cuando no escribir un plugin es para mantener la coherencia - que es menos probable que se olvide de hacerlo cuando se es importante si estás en el hábito de hacerlo cuando no es. Además, nunca se sabe cuándo tendrá la oportunidad de reciclar el código.

17
(function() { 
    // all JS code here 
})(); 

es una expresión llamada inmediatamente-Función (IIFE), que se pronuncia "dudoso". Algunas personas también las llaman "funciones anónimas autoejecutables" o simplemente "funciones autoejecutables".

(function(aParameter) { 
    alert(aParameter); // will alert "an argument" 
})("an argument"); 

He aquí un IIFE que toma el parámetro 'aParameter' y se hace pasar por el argumento "un argumento".

(function($){ 
    alert($(window).jquery); // alert the version of jQuery 
})(jQuery); 

Ésta es similar, pero "jQuery" (la instancia del objeto jQuery) es el argumento de la IIFE, y en este caso, jQuery pasa como parámetro '$'. De esta forma, simplemente escribiendo '$', el cuerpo del IIFE tiene acceso a jQuery y a sus miembros. Esta es una convención jQuery común, y es común que las personas que escriben complementos jQuery mantengan esta convención de esta manera.

El código anterior no solo mantiene la convención jQuery, sino que también garantiza que ni usted ni ninguna otra persona puedan infringir accidentalmente esa convención. Por ejemplo, tome el siguiente código:

var $ = function() { 
    alert('foo'); 
} 

Este código convierte '$' en algo que definitivamente no es jQuery. Si alguien hizo esto en otro código fuera de tu código de complemento, y luego no pasaste explícitamente jQuery como '$' a tu complemento, entonces no podrías usar '$' como jQuery como lo haces normalmente.

+1

IIFE es la lengua vernácula más común para funciones autoejecutables. –

+1

@JoshH gran sugerencia. Actualizado. +1 - ¡gracias! –

Cuestiones relacionadas