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();

¿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.

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.