Comunidad de diseño web y desarrollo en internet online

jQuery Plug-in Wrapper - ¿Cómo Funciona?

Citar            
MensajeEscrito el 19 Sep 2012 05:30 am
En el sitio jQuery.com está documentado de manera muy prácitca como crear un plug-in de jQuery.

Aunque tuve un poco de dificultad entendiendo el concepto de "closures" de javascript, creo que ya lo voy entendiendo. Básicamente se trata de la persistencia de variables privadas luego de que una función se ha terminado de ejecutar. Un concepto bastante poderoso dentro del universo de las funciones anónimas en javascript.

Ahora, el concepto que estoy teniendo problema en comprender es ¿Cómo funciona el código azul de la siguiente construcción? Usado en la creación de jQuery plug-ins.

(function( $ ) {
$.fn.myPlugin = function() {

// Do your awesome plugin stuff here

};

})( jQuery );

Siendo que se trata de una función anónima ¿cómo es invocado el código interno?

Por janunezc

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Sep 2012 01:19 pm
buenas, 1ero esa funcion en azul, es una funcion autoejecutable
por ende ejecuta todo lo q tiene dentro de ella en cuanto inicies el documento, y luego para llamar a tu metodo creo que esta bastante explicito, $.fn.MYPLUGIN es como si dije $.FN.CLICK

es MYPLUGIN, es el nombre de tu plugin al cual llamas, mediante un selector

$('.clase').MYPLUGIN(parametros); etc
espero haberte ayudado.

Por skaterseba

Claber

170 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Sep 2012 01:55 pm
Gracias por la respuesta.

En efecto, recientemente aprendí que la parte azul del código en realidad se divide en dos (azul y rojo en el ejemplo siguiente)

La parte azul es la declaración de una función anónima; y la parte roja es la llamada a dicha función pasándole el objeto jQuery como parámetro.

El objeto jQuery fue definido por ejemplo en el script jquery.min.js previamente.

El uso de esa función anónima (closure) permite que las variables que se definan para el plugin mantengan un alcance limitado a esa función y no "choquen" con otras definiciones de nivel global.


(function( $ ) {
$.fn.myPlugin = function() {

// Do your awesome plugin stuff here

};

})( jQuery );

Por janunezc

1 de clabLevel



 

msie8
Citar            
MensajeEscrito el 19 Sep 2012 08:41 pm
si, exacto, y para ahorrarte el "jquery" de abajo
lo mas comun, y lo que se suele ver es esta sintaxis

$(function(){
$.fn.yourPlugin = function(){

}
})();

suerte.

Por skaterseba

Claber

170 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.