Kiedy funkcja klonowania jQuery jest przydatna?

Jedno z wyzwań związanych z nauką biblioteki (czy to standardowej biblioteki funkcji dostarczanej z językiem programowania, czy z projektem innej firmy) jest dwojakie:

1. poznanie dostępnych funkcji,
2. nauka korzystania z tych funkcji.

I tak naprawdę czasami nawet nauka korzystania z tych funkcji nie jest aż tak trudna – to wiedza, kiedy użyć danej funkcji, aby pomóc zminimalizować kod, a jednocześnie osiągnąć cele projektu.

Funkcja klonowania jQuery

Jednym z przykładów, który przychodzi mi do głowy, jest użycie funkcji klonowania jQuery. Definicja funkcji jest prosta:

Metoda .clone() wykonuje głęboką kopię zestawu dopasowanych elementów, co oznacza, że ​​kopiuje dopasowane elementy, a także wszystkie ich elementy potomne i węzły tekstowe.

Zaletą funkcji jest to, że może ona również tworzyć „płytką" kopię funkcji. Oznacza to, że możesz kopiować elementy bez obsługi zdarzeń, elementów potomnych i tak dalej.

W zależności od potrzeb jeden będzie bardziej wartościowy niż drugi. Ale w tym poście załóżmy, że poszukujemy głębokiej kopii.

1 Potencjalny przypadek użycia

Załóżmy, że masz zestaw obrazów na stronie i dla każdego z nich musisz dodać obsługę zdarzeń, aby po kliknięciu obrazu coś się stało.

• być może pojawi się modalne okno dialogowe,
• być może coś jest wysyłane do serwera poprzez asynchroniczne żądanie,
• może trzeba zmienić prezentację strony,
• itp.

Nie wiem. Niezależnie od przypadku, załóżmy, że masz obraz lub zestaw obrazów i po kliknięciu musisz wyświetlić modalne okno dialogowe.

2 Konfigurowanie kodu

Aby to zrobić, musimy zrobić kilka rzeczy:

1. dodać niestandardowy atrybut do obrazków, dzięki czemu będziemy mogli dołączyć odpowiednie handlery zdarzeń,
2. ustawić podszablon, który ma znacznik, który chcemy wyświetlić z danym fragmentem HTML,
3. użycie klonu do wykorzystania, skorzystaj z części, którą napisaliśmy i zduplikowaliśmy w razie potrzeby.

Krok 1

Jeśli pracujesz z WordPressem i szukasz sposobu dodawania niestandardowych atrybutów obrazu, możesz zapoznać się z samouczkiem, jak to zrobić w tym poście.

Krok 2

Tworzenie części jest proste. Kod może być tak prosty, jak następujący fragment :

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

I tak, możesz ubrać to trochę w CSS i dodać niestandardowy kod do jednego z elementów za pomocą PHP, ale to obejmuje absolutne podstawy.

Krok 3

Załóżmy teraz, że dla każdego obrazu, który istnieje na stronie (z niestandardowym atrybutem, takim jak data-type=”acme” ), chcemy dołączyć kopię powyższego elementu do strony powiązanej z każdym z obrazów na stronie.

Aby to zrobić, musimy wiedzieć:

1. kiedy element zostanie kliknięty,
2. to element nadrzędny,
3. i jak dołączyć element za pomocą  metody klonowania.

Dlatego najpierw chcemy wykryć, kiedy dany obrazek zostanie kliknięty. Aby to zrobić, możemy przejść przez wszystkie obrazy na stronie, aby móc dołączyć niestandardowy program obsługi zdarzeń:

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

  // ...

});

Następnie, po kliknięciu obrazu, znajdujemy element nadrzędny obrazu, który został kliknięty (i wtedy dzieje się większość pracy ).

Oznacza to, że pobieramy kopię elementu wcześniej w poście, klonujemy ją i dołączamy do kontenera:

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

  });
});

A potem z każdym możemy pracować niezależnie.

Kilka Gotchas

Podczas klonowania elementów należy pamiętać o kilku rzeczach (o których wspomniano powyżej). Konkretnie:

• pamiętaj, że możesz potrzebować klonowanych elementów w różny sposób w zależności od obsługi zdarzeń,
• może być konieczne utworzenie niestandardowych identyfikatorów dla danego elementu przed dodaniem go do strony,
• być może element musi zostać przełączony, gdy coś zostanie kliknięte,
• i tak dalej.

Istnieje wiele sposobów obsługi sklonowanego elementu, ale za każdym razem, gdy to zrobisz, upewnij się, że podczas klonowania elementu prawidłowo identyfikujesz zdarzenia i zarządzasz nimi, dzięki czemu nie otrzymujesz błędnych wyników.