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.

	/**
	* Plantilla basica para plugin de JQuery
	*
	* @author Alberto Rivas
	*/
	(function( $ ) {

	'use strict';

	// Remplazar "funcitonName" con el nombre de la funcion
	$.fn.functionName = function (options) {

	// Opciones por defecto si no se indican
	var defaults = {
	// Lista de opciones por defecto
	};

	// Extiende las opciones
	var opts = $.fn.extend(defaults, options);

	// Define variables y constantes internas como estilos (si no se utiliza una hoja de estilos)
	//var styles = {};
	//var classes = {};

	// Valida los datos de entrada, valores requeridos, max, min...
	// Si se produce un error, informar sobre ello usando la funcion $.error("Message")

	// Define funciones auxiliares para estructurar el codigo. Ejemplos de funciones son para la gestion de eventos
	//function onClose() {}

	// Incluye aqui el codigo que implementa la logica del plugin
	// Utiliza los datos previamente definidos para facilitar el posterior mantenimiento

	// Ademas, utiliza el selector $(this) para hacer referencia al elemento que ha sido usado para llamar al plugin

	}

	// Define el elemento del DOM a utilizar si no se indica ningun elemento en la llamada (reemplazar de nuevo "funcionName").
	// Valores tipicos son: body, *[data-type='aaa'], .clasePersonalizada...
	$.functionName = function (options) {
	// Devuelve la ejecucion del plugin
	return $('body').functionName(options);
	};

	}( jQuery ));

view raw JQuery: Plantilla Básica Plugin JQuery hosted with ❤ by GitHub

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:

	/**
	* Plugin que cambia el color de fondo de un elemento
	*
	* @author Alberto Rivas
	*/
	(function( $ ) {

	'use strict';

	// Funcion principal, cambia el color de fondo del elemento proporcionado al color indicado.
	// Por defecto se utilizara el color "red"
	$.fn.cambiaBackgroundColor = function (options) {

	// Opciones por defecto si no se indican
	var defaults = {
	// Lista de opciones por defecto
	color: 'red'
	};

	// Extiende las opciones
	var opts = $.fn.extend(defaults, options);

	// Define variables y constantes internas
	var coloresValidos = ['red', 'yellow', 'blue'];

	// Valida los datos de entrada, valores requeridos, max, min...
	// El color sea un dato requerido y solo podra ser "red", "yellow" o "blue"
	if (-1 == $.inArray(opts.color, coloresValidos)) {
	$.error("Color no valido, los valores aceptados son: 'red', 'yellow' o 'blue'");
	}

	// Define funciones auxiliares para estructurar el codigo. Ejemplos de funciones son para la gestion de eventos

	// Incluye aqui el codigo que implementa la logica del plugin
	// Asignamos el color de fondo al elemento proporcionado
	$(this).css("background-color", opts.color);
	}

	// Si no se indica ningun elemento, el plugin afectara al body del html
	$.cambiaBackgroundColor = function (options) {
	return $('body').cambiaBackgroundColor(options);
	};

	}( jQuery ));

view raw JQuery: Ejemplo Uso Plantilla Básica Plugin JQuery hosted with ❤ by GitHub

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.

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="/path_to_file/jquery.cambiaBackgroundColor.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {

	// Cambia el color de fondo del body a azul
	$.cambiaBackgroundColor({color: 'blue'});

	// Cambia el color de fondo del div con id "ejemplo"
	$("div#ejemplo").cambiaBackgroundColor();

	// Genera un error al no usar un color valido
	$("div#ejemplo").cambiaBackgroundColor({color: 'black'});

	});

	</script>