Tworzenie komponentów jQuery w WordPress

Rozwój front-endu poczynił wielkie postępy w ciągu ostatnich kilku lat (i nadal to robi) dzięki wykorzystaniu preprocesorów CSS i różnych technologii opartych na JavaScript.

Fajną rzeczą jest to, że wszystkie z nich mogą być nadal używane w kontekście rozwoju WordPress; jednak ponieważ WordPress zawiera jQuery, nie jest niczym niezwykłym kontynuowanie pisania JavaScript opartego na jQuery.

Pomimo wszystkich różnych technologii (takich jak Angular, Vue, React itp.), nadal używam jQuery i ES6 częściej niż innych bibliotek i narzędzi.

W przypadku prostych zadań nie stanowi to problemu, ale gdy trzeba, powiedzmy, zbudować bardziej zaawansowane komponenty w oparciu o odpowiedź na wywołanie API, użycie jQuery może być nieco trudne.

Nie oznacza to, że nie można go użyć – i przejdę przez chwilę, jak używać go do dynamicznego budowania komponentów – ale myślę, że przedstawia przypadek, w którym inne opcje są bardziej zmienne.

Ale o tym na końcu wpisu.

Tworzenie komponentów jQuery w WordPress

Ilekroć odnoszę się do idei komponentu, myślę o kombinacji elementów, które współpracują ze sobą, aby stworzyć bardziej złożony element.

Załóżmy na przykład, że wykonujesz wywołanie API, a następnie, korzystając z odpowiedzi, musisz utworzyć komponent, który składa się z innych elementów.

Definiowanie i rysowanie komponentu

Na początek myślę, że to dobry sposób na zdefiniowanie komponentu: element, który składa się z kombinacji elementów.

Przynajmniej tego użyję w tym konkretnym poście.

Następnie, jak możemy to zwizualizować w kategoriach przed skodyfikowaniem? Może coś takiego:

Ponownie, wszystko to opiera się na pomyśle wykonania żądania API i pracy na danych.

Wykonywanie wywołania API

Wykonywanie wywołania API za pomocą API WordPressa jest czymś, co omówiłem w niektórych postach (a jeśli szukasz najbezpieczniejszego sposobu na zrobienie tego, polecam przeczytać ten post ).

Ale przepływ kontroli wyglądałby mniej więcej tak:

A kod do tego wyglądałby mniej więcej tak :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Ale to nadal nie prowadzi nas do momentu zbudowania komponentu z odpowiedzi.

Praca z odpowiedzią

Ten następny fragment to wszystko, w jaki sposób zdecydujesz się napisać swój JavaScript. Nie twierdzę, że sposób, w jaki robię, jest sposobem na zrobienie tego, ale jest to sposób na zrobienie tego.

W każdym razie w tym poście załóżmy, że otrzymamy pewne dane z powrotem z API i że mamy gwarancję ich posiadania (to zapobiega nam konieczności pisania klauzul ochronnych).

Ponadto pozwala nam wypełnić niezbędne zmienne do zbudowania naszego komponentu. W ten sposób staram się, aby kod był możliwie najszczuplejszy.

var $container = $('#component-container'),
    i, l       = 0;

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function( response) {

  for( i = 0, l = response.data.length; i < l; i++) {
    $container.append(
      _createComponent(response.data[i])
    );
  }

});

Stąd możemy teraz skonfigurować metodę, która utworzy komponent i zwróci wynik, który pozwoli nam dołączyć go do DOM.

Kładąc wszystko razem

Na podstawie powyższego kodu powinno być stosunkowo jasne, co należy zrobić, aby utworzyć komponent.

Mimo to, połączenie tego wszystkiego w całość jest procesem, który wymaga:

1. złożenie wniosku,
2. czytanie odpowiedzi,
3. budowanie komponentu na podstawie odpowiedzi

/**
 * Creates a component to be added from the DOM based on the incoming data.
 *
 * For the purposes of this function, we're assuming there are several properties
 * on data of which we're already aware.
 *
 * @param data  The object containing the properties we need for the component.
 *
 * @return      The component created from the incoming data.
 */
function _createComponent(data) {

  var title       = data.title,
      imageUrl    = data.imageUrl,
      description = data.description,
      $component  = $('<div ></div>');

  $component
    .append(
      $('<p ></p>').text(title)) .append(
      $('<img />').attr('src', imageUrl)) .append(
      $('<p ></p>').text(description)
    );

  return $component;
}

Powyższy kod powinien być oczywisty, ale jeśli nie, robi to :

1. Pobranie informacji z odpowiedzi, takich jak tytuł, adres URL obrazu i opis,
2. tworzenie elementów każdego z nich,
3. dołączanie ich do elementu div
4. zwracanie  elementu div po dołączeniu do niego różnych elementów.

Stamtąd możesz pobrać element – ​​komponent – ​​i dołączyć go do kontenera (jak pokazano wcześniej w kodzie), a następnie kontynuować to z resztą informacji z odpowiedzi.

Korzystasz z innych technologii JavaScript?

Jak wspomniałem na początku wpisu, jest to dużo pracy związanej z jQuery, aby stworzyć komponent do dodania do DOM.

Połącz to z responsywnym charakterem (nie responsywnym pod względem projektowania mobilnego, ale pod względem części wyświetlacza reagujących na zmiany w warstwie prezentacji), a masz całkiem niezły argument za użyciem innej technologii do zrobienia czegoś takiego.

Ale nadal istnieją projekty, które będą odwoływać się do określonego stosu, a jeśli jQuery jest częścią tego stosu, to jest to jeden ze sposobów na zrobienie tego.