Створення компонентів jQuery в WordPress

За останні пару років інтерфейсна розробка досягла великих успіхів (і продовжує розвиватися) завдяки використанню препроцесорів CSS і різних технологій на основі JavaScript.

Приємно те, що все це все ще можна використовувати в контексті розробки WordPress; однак, оскільки WordPress містить jQuery, нерідко продовжують писати JavaScript на основі jQuery.

Незважаючи на всі різноманітні технології (такі як Angular, Vue, React тощо), я все ще використовую jQuery та ES6 більше, ніж інші бібліотеки та інструменти.

Для простих завдань це не проблема, але коли потрібно, скажімо, створити складніші компоненти на основі відповіді на виклик API, використання jQuery може бути дещо складним.

Це не означає, що його не можна використовувати – і я розповім, як використовувати його для миттєвої динамічної побудови компонентів – але я думаю, що це випадок, коли інші параметри є більш змінними.

Але про це в кінці публікації.

Створення компонентів jQuery в WordPress

Кожного разу, коли я згадую про компонент, я маю на увазі комбінацію елементів, які разом створюють більш складний елемент.

Наприклад, скажімо, ви робите виклик API, а потім, використовуючи відповідь, вам потрібно створити компонент, який складається з інших елементів.

Визначення та малювання компонента

Отже, для початку, я думаю, що це хороший спосіб визначити компонент: елемент, який складається з комбінації елементів.

Принаймні це те, що я збираюся використовувати для цієї конкретної публікації.

Далі, як ми можемо візуалізувати це в термінах перед кодифікацією? Можливо щось на зразок цього:

Знову ж таки, все це базується на ідеї створення запиту API та роботи з даними.

Здійснення виклику API

Здійснення виклику API за допомогою WordPress API — це те, про що я розповідав у деяких публікаціях (і якщо ви шукаєте найбезпечніший спосіб це зробити, я рекомендую прочитати цю публікацію ).

Але потік керування виглядав би приблизно так:

І код для цього виглядатиме приблизно так :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Але це ще не веде нас до точки створення компонента з відповіді.

Робота з Відповіддю

Наступний фрагмент — це те, як ви вирішуєте написати свій JavaScript. Я не стверджую, що те, як я роблю, є способом зробити це, але це спосіб зробити це.

У будь-якому випадку, для цієї публікації припустимо, що ми збираємося отримати назад деякі дані з API і що ми гарантовано їх матимемо (це запобігає нам від необхідності писати захисні положення).

Крім того, це дозволяє нам заповнювати необхідні змінні для створення нашого компонента. Таким чином, я зберігаю код якомога меншим.

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

});

Тепер ми можемо налаштувати метод, який створить компонент і поверне результат, який дозволить нам додати його до DOM.

Збираємо все разом

Виходячи з коду вище, має бути відносно зрозуміло, що вам потрібно зробити, щоб створити компонент.

Незважаючи на це, зібрати все разом — це процес, який вимагає наступного:

1. зробити запит,
2. читання відповіді,
3. створення компонента на основі відповіді

/**
 * 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;
}

Наведений вище код має бути зрозумілим, але якщо ні, він виконує наступне :

1. Беручи інформацію з відповіді, таку як заголовок, URL-адреса зображення та опис,
2. створення елементів кожного з них,
3. додавання їх до елемента div
4. повернення елемента div після того, як до нього додано різні частини.

Потім ви можете взяти елемент – компонент – і додати його до контейнера (як показано раніше в коді), а потім продовжити робити це з рештою інформації з відповіді.

Використовуєте інші технології JavaScript?

Як згадувалося на початку публікації, для створення компонента для додавання в DOM потрібно багато роботи щодо jQuery.

Поєднайте це з чуйною природою (не чуйною з точки зору мобільного дизайну, а з точки зору частин дисплея, які реагують на зміни в презентаційному рівні), і ви матимете досить хороші аргументи для використання іншої технології, щоб зробити щось подібне.

Але все ж існують проекти, які вимагають певного стеку, і якщо jQuery є частиною цього стеку, то це один із способів піти вперед і зробити саме це.