jQuery Blues: 10. Funciones extendidas

En esta entrada veremos cómo se puede añadir una función propia a la superfunción jQuery, de tal manera que esté disponible cuando se necesite.

klimt

archivado en: JavaScript / 21 marzo, 2013 / taller:

En la entrada anterior de esta serie dedicada a jQuery desde cero vimos qué es un objeto en JavaScript, en qué se diferencia de las funciones normales, y como «prototiparlo». Con estos conocimientos de partida, nos resultará más fácil entender cómo se trabajan las funciones en jQuery.

Hasta ahora hemos trabajado todo el tiempo con funciones anónimas que se ejecutaban a partir de un evento relacionado con un selector, como esta función que colorea el fondo de un párrafo en rojo.

<script>

$(document).ready(function () {

$("p").click (function () {

$("p").css ("background-color", "#900");

});

});
</script>

Sin embargo, en otras ocasiones necesitaremos trabajar con funciones que tengan un nombre para poder llamarlas, invocarlas, cuando sea preciso.

Para emplear funciones con nombre en jQuery hay varias maneras. Así creo que es la manera más sencilla:

// creamos la función

$.fn.NombreFuncion = function() {

alert('Hey, soy una función con nombre');

};

$(document).ready(function() {

// la llamamos al hacer click.

$("p").click (function () {

$(this).NombreFuncion();

});

});

Claro está, podríamos pasarle parámetros a la función con nombre:

$.fn.NombreFuncion = function(recogeNumero1, recogeNumero2) {

var numero1 = recogeNumero1;

var numero2 = recogeNumero2;

var resultado = numero1+numero2;

// esto da 7

alert(resultado);

};
$(document).ready(function() {

$("p").click (function () {

$(this).NombreFuncion(3, 4);

});

});

Extendiendo jQuery

Bueno, vamos a profundizar ahora un poco en el código de antes, en particular en la fórmula esa de «$.fn.» que hay antes del nombre de la función. Como vimos en la entrada anterior, podemos acceder a los métodos y propiedades de un objeto mediante la notación de puntos.

  • objeto.propiedad;
  • objeto.metodo();

Además, vimos que los objetos podían «heredar» las características de otro mediante la propiedad prototype. Así, por ejemplo extendíamos el objeto Troll al objeto TrollAzules.

TrollAzules.prototype = new Troll("Turumbulillos", 120, 14);

Y, más o menos, eso es lo que estamos haciendo con .fn, pues es un alias, otra forma de llamar, a la propiedad prototype. Es decir esto:

$.fn.miNombreFuncion...

equivale a esto:

jQuery.prototype.miNombreFuncion

Para entendernos, es como si estuviéramos incorporando nuestra función al conjunto de instrucciones que conforman la librería de jQuery.

Otro ejemplo para terminar de entender esta idea. Como hemos visto, para colorar de rojo el fondo de los párrafos mediante una función anónima hacíamos algo así:

$("p").css ("background-color", "#900");

Es como si estuviéramos ejecutando estas instrucciones:

  1. Llamamos a la función / objeto jQuery ($).
  2. Utilizamos el método .css de ese objeto, al cual pasamos dos parámetros: la propiedad a cambiar y el valor.

Eso mismo con una función con nombre se podría hacer así:

$.fn.Colorea = function() {

$(this).css("background-color", "#900");

};

$(document).ready(function() {

$("p").click (function () {

$("p").Colorea ();

});

});

Hay otra forma mejor de hacerlo que veremos más adelante, pero ahora lo que me interesa destacar es el proceso:

  1. Primero incorporamos al objeto, la función, jQuery un nuevo método (Colorea).
  2. Luego lo utilizamos como cualquier otro método nativo del objeto jQuery.

Bueno, no sé si ha entendido, pero es que no sé me ocurre cómo explicarlo de forma más clara. De todas maneras, en la próxima entrada seguiremos trabajando las funciones y ya en la siguiente pasaremos a ver qué son los selectores complejos.

|| Tags: , ,

valoración de los lectores sobre jQuery Blues: 10. Funciones extendidas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.4 sobre 5 (10 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “jQuery Blues: 10. Funciones extendidas