Siedrix

RSS Twitter

¿Como hacer un Plug in de jQuery?

Lo primero que tenemos que preguntarnos es ¿Que es un plug in de jQuery? Y la respuesta es fácil, es un snipet de código que puede ser llamado y aumentar la funcionalidad de jQuery, probablemente todos conocemos alguno de esto en la forma de un Slider o widgets de Twitter; hasta funciones para ordenar objetos del DOM y autocomplete con Ajax.

¿Que características fundamentales tiene un plug in de jQuery? Las 2 grandes características son el hecho de que nos permiten extender jQuery y que son encapsulados para no tener problemas de scope de variables. Al ser encapsulados se agregan con

¿Como hacer un Plug in de jQuery? Para crearlos lo primero que debemos de definir es el ambiente donde se ejecutara el código.

(function($){
  // Our code here...
})(jQuery);

Al declarar todo entre paréntesis nos permite aislar las variables locales de las variables locales. Al usar el signo de $ como parámetro de la función nos permite usar el shortcut aunque en el ambiente general donde se agregue no esté definido.

Lo siguiente que necesitamos recordar es definir todas nuestras variables empezando con var para no tener conflictos con las variables de la aplicación donde sean agregadas.

La manera de declarar funciones dentro de un plug-in es de la siguiente manera:

$.fn.nombreDeLaFuncion = function() {
	//.. codigo
}

De esta manera nuestra función podrá ser llamada como callback de otra función. También el hecho de que el plug-in termine con (jQuery) hace que nuestras funciones tengan la posibilidad de tener callback.

De esta manera podremos tener plug-ins listos para reusar en distintas aplicaciones y compartir con los cuates.

Related posts:

  1. Plug-in de jQuery y TinyDash
  2. 10 cosas que aprender del codigo de jQuery
  3. HTML Scrapping con jQuery y Node.js
  4. Plugin de jQuery para Twitter
  5. Templates para jQuery 1.43 y un poco mas

Deja tu Opinión

Puedes agregar tags de HTML como: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">