¿Cuándo es útil la función de clonación de jQuery?

Uno de los desafíos de aprender una biblioteca (ya sea la biblioteca estándar de funciones que viene con un lenguaje de programación o un proyecto de terceros) es doble:

1. aprender las funciones que están disponibles,
2. aprender a utilizar dichas funciones.

Y, realmente, a veces incluso aprender a usar dichas funciones no es tan difícil: es saber cuándo usar una función determinada para ayudar a minimizar el código y al mismo tiempo lograr los objetivos del proyecto.

Función de clonación de jQuery

Un ejemplo que me viene a la mente es el uso de la función de clonación de jQuery. La definición de la función es simple:

El método .clone() realiza una copia profunda del conjunto de elementos coincidentes, lo que significa que copia los elementos coincidentes, así como todos sus elementos descendientes y nodos de texto.

Lo bueno de la función es que también puede crear una copia "superficial" de la función. Esto significa que puede copiar los elementos sin los controladores de eventos, elementos secundarios, etc.

Dependiendo de sus necesidades, uno será más valioso que el otro. Pero, para esta publicación, asuma que lo que buscamos es una copia profunda.

1 Un caso de uso potencial

Digamos que tiene un conjunto de imágenes en una página y para cada una de esas imágenes, necesita agregar algún controlador de eventos para que cuando se haga clic en la imagen suceda algo.

• tal vez aparece un diálogo modal,
• tal vez algo se envía al servidor a través de una solicitud asíncrona,
• tal vez la presentación de la página necesita cambiar,
• etc.

No sé. Cualquiera que sea su caso, digamos que tiene una imagen o un conjunto de imágenes y necesita mostrar un cuadro de diálogo modal cuando se hace clic en él.

2 Configuración del código

Para hacer esto, hay varias cosas que debemos hacer:

1. agregue un atributo personalizado a las imágenes para que podamos adjuntar controladores de eventos adecuados,
2. configurar un parcial que tenga el marcado que queremos mostrar con una determinada pieza de HTML,
3. usando clon para aprovechar el parcial que hemos escrito y duplicado, según sea necesario.

Paso 1

Si está trabajando con WordPress y está buscando cómo agregar atributos de imagen personalizados, puede ver un tutorial sobre cómo hacerlo en esta publicación.

Paso 2

Crear un parcial es simple. El código podría ser tan simple como el siguiente fragmento :

<p class="acme-element">
    <span>Acme</span>
</p><!--- .acme-element -->

Y sí, podría vestirlo con un poco de CSS y agregar un código personalizado a uno de los elementos usando PHP, pero esto cubre los conceptos básicos absolutos.

Paso 3

Ahora digamos que para cada imagen que existe en la página (con un atributo personalizado como data-type="acme» ), queremos agregar una copia del elemento anterior a la página relacionada con cada una de las imágenes en la página.

Para ello, necesitamos saber:

1. cuando se hace clic en un elemento,
2. es elemento padre,
3. y cómo agregar el elemento usando el método de clonación .

Entonces, primero, queremos detectar cuándo se hace clic en una imagen determinada. Para hacer esto, podemos recorrer todas las imágenes en la página para poder adjuntar un controlador de eventos personalizado:

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  // ...

});

Luego, cuando se hace clic en la imagen, encontramos el elemento principal de la imagen en la que se hizo clic (y luego ocurre la mayor parte del trabajo ).

Es decir, tomamos una copia del elemento anterior en la publicación, lo clonamos y lo agregamos al contenedor:

var $this, $parent, $clone;

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  $this = $(this);
  $(this).on('click', function() {

    // Reference the parent of the image that was clicked and clone the element.
    $parent = $this.parent();
    $clone  = $('.acme-element').clone(true);

    // Next, append the cloned element to the parent.
    $parent.append($clone);

  });
});

Y luego podemos trabajar con cada uno de forma independiente.

Algunas trampas

Al clonar elementos, hay algunas cosas que debe recordar (que se mencionan anteriormente). Específicamente:

• recuerde que es posible que necesite clonar elementos de manera diferente según el controlador de eventos,
• es posible que deba crear ID personalizados para un elemento determinado antes de agregarlo a la página,
• tal vez un elemento deba alternarse cuando se hace clic en algo,
• y así.

Existen numerosas formas de manejar un elemento clonado, pero cada vez que lo haga, asegúrese de que cuando clone un elemento, esté identificando y administrando correctamente los eventos, para que no obtenga resultados erráticos.