Cómo crear un plugin para JQuery en 3 fáciles pasos

¿Has creado un script en JQuery y quieres convertirlo en un plugin para poder reutilizarlo fácilmente? En este post explicaremos paso a paso cómo hacerlo.

Paso 1: Crear la estructura del plugin

El primer paso es el más simple, copiar y pegar. Copia el siguiente código que he creado en github, pégalo en un archivo con extensión js y cambia todas las apariciones de "functionName" con el nombre del plugin a crear.

 

Paso 2: Definir la lógica del plugin

Define las variables y funciones necesarias para el correcto funcionamiento del plugin en las zonas del código especificadas.

Como ejemplo vamos a crear un plugin que cambie el color de fondo del elemento que invoque al plugin. Y como parámetro recibirá el color a usar.

He aquí el código que usaremos:

Paso 3: Incluir el plugin en el código HTML

Por último, realiza la llamada al plugin creado dentro de tu código HTML. Asegúrate de que previamente se ha incluido JQuery en el HTML.

Espero os sirva de ayuda para comenzar a crear vuestros propios plugins de JQuery. Y tu, ¿cómo reutilizas el código JQuery en tus proyectos?