Como crear un plugin para Jquery - primeros pasos

Jquery es una librería JS que permite simplificar el desarrollo de aplicaciones con Java Script, permite realizar fácilmente peticiones Ajax, manipular el DOM, ejecutar efectos sobre los elementos HTML, entre otras características.

Como suele suceder con otras herramientas de desarrollo, la cantidad de funcionalidades que ofrecen de serie se quedan cortas en determinado momento y es necesario crear nuevas características a partir del código base. Con el objetivo de suplir las carencias que se puedan presentar en el desarrollo de aplicaciones Web apoyadas en Jquery, esta librería permite ser extendida a través de plugins, a continuación se expone una guía para comenzar a escribir Plugin para Jquery.

1-  Estructura base de un Plugin: Hay dos formas de declarar la estructura inicial del Plugin,  las cuales son expuestas a continuación:

https://gist.github.com/f6c3bc... La primera estructura hace uso de los métodos y atributos de Jquery, utilizando el objeto: jQuery directamente.

https://gist.github.com/dad7d4... En la segunda estructura se utiliza el famoso $ (dolar).  Es necesario tener especial cuidado al mezclar en los proyectos librerías JavaScript, puesto que podrían referenciar al signo $ y esto generaría un funcionamiento errático en el Plugin Jquery, sin embargo en el ejemplo mostrado anteriormente se utiliza la practica de: IIFE (Immediately Invoked Function Expression) es decir, se le pasa el objeto jQuery como parámetro a la función inmediatamente declarada, evitando que el signo $ sea sobrescrito por otra librería JS, esto nos da la seguridad de que nuestro Plugin trabajará correctamente.

2- Explicación del Plugin de ejemplo: El plugin expuesto anteriormente recibe como parámetro la variable paginate (actualmente no esta en uso), además de eso captura un objeto Jquery en la variable $parent, luego busca dentro de los hijos de $parent los div que tengan la clase awesome-listing y les coloca la clase awesome-listing-element, utilizando el método toggleClass(). Todo esto con el objetivo de aplicar varios estilos CSS a las etiquetas que tengas la clase awesome-listing-element.

3- HTML de ejemplo: En este enlace se puede apreciar el HTML de ejemplo,  sobre el cual se esta aplicando el Plugin de Jquery.

https://gist.github.com/f45d52... 4- CSS:

https://gist.github.com/403e6a... Bueno gente eso es todo por hoy, una entrada súper sencilla pero necesaria para introducirnos en el mundo de los Plugin para Jquery. Nos vemos en una próxima EntryAxiacore.