> Manuales > Manual de jQuery

Cómo crear métodos en jQuery asignados directamente a jQuery, con el método extend(), que no dependen de los elementos de la página.

En el mundo del desarrollo de plugins en jQuery hay una serie de pautas habituales y recomendadas, como es la creación de nuevos plugins extendiendo la propiedad "fn" del objeto jQuery. Esto ya lo comentamos en el Manual de jQuery en concreto en el artículo de las Reglas de Desarrollo de Plugins.

En este artículo vamos a explicar un método alternativo de creación de plugins, que tiene una diferencia importante. Básicamente se trata de asignar nuevos elementos al "namespace" de jQuery. Te lo vamos a explicar con detalle a lo largo de las próximas líneas.

Creación habitual de los plugins

Generalmente hacemos los plugin a través de la propiedad "fn" del objeto jQuery. Esto es importante mencionarlo para que se vean las diferencias con el otro método que vamos a explicar ahora.

jQuery.fn.miPlugin = function(){
   //código del plugin
}

De este modo, podrás fácilmente usar tus propios plugins a través de cualquier objeto jQuery creado a través de un selector.

$("p").miPlugin();

Eso invocaría el plugin miPlugin sobre todas las etiquetas "P" de la página.

Explicación de extend

El método extend es un método del "core" de jQuery. Sirve para fusionar dos, o más, objetos en uno solo. A un objeto le vas agregando las nuevas propiedades que tienes en otros objetos. Como este método ya lo explicamos en otro artículo más antuguo, me ahorro las explicaciones y os remito directamente al artículo Método extend.

Pues bien, este método es susceptible de asignarle más información a jQuery en si, a nuestro querido $.

- Si a extend le envío como parámetro dos o más objetos, extiende las propiedades del objeto del primer parámetro con las propiedades (o métodos) del objeto del segundo parámetro o los siguientes.

$.extend(obj1, obj2); //ahora obj1 tendrá también las propiedades y métodos de obj2

- Si a extend sólo le entregamos un parámetro, entonces extiende el objeto jQuery con las propiedades y métodos del objeto que enviemos en el único parámetro.

$.extend(obj1) //ahora jQuery está conteniendo las propiedades y métodos de obj1

Cómo crear un plugin que dependa directamente de jQuery

Con lo que acabamos de aprender, podremos entender el siguiente código.

$.extend({
pluginNuevo: function() {
      //código del plugin
   }
});

Esto técnicamente agrega la propiedad "pluginNuevo" al objeto jQuery. (Es cierto que pluginNuevo es un método, pero en realidad en Javascript no deja de ser una propiedad de un objeto en la que hemos asignado una función, si te genera dudas esto de propiedades y métodos, no te preocupes, es solo una manera de hablar) Dicho de otra manera, estás asignando nuevos elementos al namespace de jQuery.

En la práctica, la diferencia de este plugin con uno de los que hacíamos antes, es que lo invocas directamente a través de la jQuery.

$.pluginNuevo();

Nota: Si lo recuerdas bien, en jQuery la mayoría de los métodos los invocas a través de objetos jQuery que has accedido a través de, por ejemplo, un selector. Los plugins que creas normalmente son como esos métodos. Pero esto, como lo ves, es un poco diferente, porque no necesitas ningún objeto jQuery creado con elementos de la página. En el propio jQuery hay diversos métodos que invocas sin necesidad de haber accedido a elementos de la página, como la función $.ajax() o el propio $.extend().

¿Aprecias la diferencia? ¿Entiendes por qué te puede ser útil este mecanismo? Imagina un plugin que tiene que revisar si existe una cookie cualquiera. Si no existe entonces debe realizar una serie de cosas. ¿A qué elemento de la página accedes para invocar este plugin? ¿A body? este plugin lo estoy desarrollando para el tema de la ley de cookies.

$("body").revisaCookie(); //no es lo más lógico

No tiene mucho sentido. ¿no? ¿Por qué no lo haces sobre document o sobre Window? ¿realmente necesitas alguno de ellos para implementar esta funcionalidad? Si la respuesta es que no, pues entonces puedes vincular el plugin a jQuery directamente.

$.revisaCookie();

Dicho eso, es importante remarcar que, ahora que conoces este mecanismo, no es necesario que lo apliques en todos tus plugin. Se te pueden ocurrir decenas de otros ejemplos. En realidad en el desarrollo de cualquier tipo de utilidad que no dependa de ningún elemento de la página en concreto y que la quieras introducir dentro de jQuery, porque seguramente usas la libreria para desarrollar la funcionalidad.

Nota: En realidad, en las reglas de desarrollo de plugins que ya comentamos se indican muchas cosas que son importantes de implementar para respetar la filosofía de la librería jQuery, como iterar con un each para recorrer todos los objetos que hayan en una colección. En esta técnica el desarrollo del plugin sería realmente distinto, porque no necesitarás realizar ese each, puesto que no vas a invocar al método sobre una colección de elementos de la página. Tampoco necesitas devolver this al final del plugin. Puedes entender estos métodos, que agregamos directamente a jQuery, más como funciones propiamente dichas de las que encuentras en la programación estructurada.

De momento esto es todo. Esperamos que encuentres utilidad en este artículo y la puedas aplicar en tu desarrollo.Desarrollar plugins que dependen directamente de jQuery.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual