Cómo crear un plugin JQuery

en JavascriptJqueryJquery plugins

Tutorial para crear un plugin jQuery: estructura y ejemplos de código

JQuery es una librería Javascript que permite desarrollar aplicaciones y scripts de una forma ágil, sencilla y rápida. Lo mejor de esta librería es que simplifica tareas como el tratamiento de eventos, interacciones AJAX o navegar a través de los elementos DOM (elementos que forman la estructura de una página HTML). Y además, ocupa poco espacio.

Para extender el uso de esta librería existen los llamados plugins, que son scripts diseñados para cumplir un propósito específico y poder ser reutilizables en diversas aplicaciones.

En este artículo veremos cómo crear un plugin jQuery, su estructura y las mejores prácticas.

Deberemos cargar en la misma página la librería jQuery que podemos descargar de su página oficial

Estructura de un plugin jQuery

Para escribir un plugin jQuery, empezaremos añadiendo una propiedad nueva al objeto de la librería jQuery.fn seguido del nombre que deseemos darle al plugin, por ejemplo:

1
2
3
4
5
(function ($){
  jQuery.fn.nombre_del_plugin = function() {
    // Aquí escribiremos el código del plugin
  };
})(jQuery);

Esta es la estructura inicial de nuestro nuevo plugin. El encapsulamiento de nuestro plugin dentro de la función $, es una de las buenas prácticas que se usan para que el plugin no interfiera con otras librerías que puedan usar este mismo signo.

Ejemplo de un plugin jQuery básico

1
2
3
4
5
6
7
8
9
10
(function ($){
  jQuery.fn.contador_divs = function() {
    var total = 0;
    this.each(function() {
      total += 1;
    });
    return total;
  };
})(jQuery);
$('div').contador_divs(); // devuelve el número de elementos div de la página

Encadenar funciones

En este ejemplo el plugin devuelve un valor entero. Normalmente nos puede interesar que un plugin modifique una colección de datos para que otra función pueda seguir modificándolos. Por ejemplo:

$('div').nombre_del_plugin().css('text-align', 'center');

En este ejemplo se aplicaría la funcionalidad del plugin sobre todos los elementos div, el plugin devolvería una colección de objetos y posteriormente se les cambiaría la propiedad css.

El código del plugin sería del tipo:

1
2
3
4
5
6
7
(function( $ ){
  $.fn.nombre_del_plugin = function( type ) {  
    return this.each(function() {
      // aquí nuestro código
    });
  };
})( jQuery );

En este caso se devuelve la colección de elementos en la instrucción return.

Cómo llamar al plugin

Para ejecutar un plugin desde la página HTML debemos hacerlo cuando el documento se haya cargado, para ello podemos usar:

1
2
3
$(document).ready({
  $('div').contador_divs();
});

Se pueden invocar tantas funciones ready como sean necesarias. Es útil cuando queramos usar distintos ficheros javascript para llamar a los plugins.

Prohibida la reproducción total o parcial de este artículo sin el previo consentimiento de Webtutoriales.com

Comentarios