Создание компонентов 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?

Как упоминалось в начале поста, это большая работа с jQuery для создания компонента для добавления в DOM.

Объедините это с адаптивным характером (не адаптивным с точки зрения мобильного дизайна, а с точки зрения частей дисплея, реагирующих на изменения на уровне представления), и у вас есть хороший аргумент в пользу использования другой технологии, чтобы сделать что-то подобное.

Но тем не менее, есть такие проекты, которые требуют определенного стека, и если jQuery является частью этого стека, то это один из способов пойти дальше и сделать именно это.