dominios y alojamiento web en hostalia

Método jQuery.extend()

15 de June de 2010
Valoración del artículo:
Uno de los métodos del paquete utilities de jQuery, que sirve para extender el contenido de dos o más objetos en uno de ellos.
Vamos a ofrecer una referencia rápida para el método jQuery.extend(), que nos ofrece una utilidad para mezclar mezclar varios objetos en uno, es decir, colocar los contenidos de todos esos objetos en uno de ellos.

El método extend pertenece a la clase jQuery, y se invoca directamente sobre ella, como si fuera un método estático de programación orientada a objetos. Como en jQuery la variable $ es un atajo de la variable jQuery, podríamos invocar a este método con estas dos posibilidades de código:

jQuery.extend(x, y, z);

O bien:

$.extend(x, y, z);

Estos dos ejemplos de código harían exactamente lo mismo, colocar en el objeto "x" todos los contenidos de los objetos "x", "y" y "z". El método extend() puede recibir cualquier número de parámetros y siempre pondrá todos los contenidos de los objetos en el objeto recibido en el primer parámetro.

Ejemplo de extend() de jQuery

Veamos cómo funciona jQuery.extend() a través de un sencillo ejemplo.

var a = {
   uno: "hola",
   otro: "adios"
};
var b = {
   uno: "otra cosa",
   dos: "loquesea"
};
jQuery.extend(a, b);

En este caso extend() recibe dos parámetros, que son dos objetos. Por tanto, mete las opciones del segundo objeto en el primero. Después de la llamada a extend(), el objeto del primer parámetro tendrá sus propiedades más las propiedades del objeto del segundo parámetro. Si alguna de las opciones tenía el mismo nombre, al final el valor que prevalece es el que había en el segundo parámetro.

Así pues, después de su ejecución, el objeto definido en la variable "a" tendrá estos datos:

{
   uno: "otra cosa",
   otro: "adios",
   dos: "loquesea"
}

Esto quizás parezca que no sirve para mucho, pero en jQuery se utiliza bastante por ser una manera cómoda de mezclar dos cosas en una. El caso más claro es mezclar los objetos de "options" para configurar un plugin, pero realmente es una acción que encontraremos por ahí varias veces. De alguna manera, hacer un extend() es como hacer que un objeto herede las cosas de otro, lo que lo convierte en un mecanismo que podrá venir bien en diversos contextos.

Para ver otros ejemplos de extend() consultar el Manual de jQuery, en la sección donde se habla de la configuración de opciones en plugins en jQuery.

Compartir en redes sociales

Comentarios
Fueron enviados 2 comentarios al artículo
2 comentarios revisados:

shidalg...
Buen tutorial
07/3/2011
Gracias. Hoy he terminado los 48 artículos. Estos han sido muy útiles y explicativos.

luismi8...
Codigo ejemplo completo
18/8/2011
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Método jQuery CSS</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script language="javascript">
$(document).ready(function(){

var bici = {
clase: "bici",
marca: "sin marca"
};
var color = {
marca: "orbea",
color: "roja"
};

$("#texto").html("Mi " + bici.clase + " es " + bici.color + " y es " + bici.marca);

jQuery.extend(bici, color);

$("#boton").click(function(e){
$("#texto").html("Mi " + bici.clase + " es " + bici.color + " y es " + bici.marca);
});
})
</script>
</head>

<body>
<p>Extender mediante el metodo extend()</p>
<button id="boton" value="extender">Pulsa para extender</button>
<p><div id="texto"></div></p>
</body>
</html>

Manuales relacionados
Categorias relacionadas
El autor
Últimas noticias
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...