Criando componentes jQuery no WordPress

O desenvolvimento front-end deu grandes passos nos últimos dois anos (e continua a fazê-lo) através do uso de pré-processadores CSS e várias tecnologias baseadas em JavaScript.

O bom é que tudo isso ainda pode ser usado no contexto de desenvolvimento do WordPress; no entanto, como o WordPress inclui jQuery, não é incomum continuar escrevendo JavaScript baseado em jQuery.

Apesar de todas as várias tecnologias (como Angular, Vue, React, etc.), ainda me vejo usando jQuery e ES6 mais do que outras bibliotecas e ferramentas.

Para tarefas simples, não é um problema, mas quando precisar, digamos, construir componentes mais avançados com base na resposta de uma chamada de API, usar jQuery pode ser um pouco pesado.

Isso não significa que ele não possa ser usado – e eu explicarei como usá-lo para construir componentes momentaneamente dinamicamente – mas acho que apresenta um caso de quando outras opções são mais variáveis.

Mas mais sobre isso no final do post.

Criando componentes jQuery no WordPress

Sempre que me refiro à ideia de um componente, estou pensando em uma combinação de elementos que trabalham juntos para criar um elemento mais complexo.

Por exemplo, digamos que você faça uma chamada de API e, usando a resposta, precise criar um componente composto por outros elementos.

Definindo e desenhando um componente

Então, para começar, acho que é uma boa maneira de definir um componente: Um elemento que é composto de uma combinação de elementos.

Pelo menos é isso que vou usar para este post em particular.

Em seguida, como podemos visualizar isso em termos antes de codificá-lo? Talvez algo assim:

Novamente, tudo isso é baseado na ideia de fazer uma solicitação de API e trabalhar nos dados.

Fazendo a chamada da API

Fazer uma chamada de API usando a API do WordPress é algo que abordei em alguns posts (e se você está procurando a maneira mais segura de fazer isso, recomendo a leitura deste post ).

Mas o fluxo de controle seria algo assim:

E o código para fazer isso seria algo assim :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Mas isso ainda não nos leva ao ponto de construir o componente a partir da resposta.

Trabalhando com a resposta

Este próximo bit é tudo como você opta por escrever seu JavaScript. Não estou afirmando que a maneira como faço é a maneira de fazê-lo, mas é uma maneira de fazê-lo.

De qualquer forma, para este post, assuma que vamos receber alguns dados de volta da API e que temos a garantia de tê-los (isso evita que tenhamos que escrever cláusulas de guarda).

Além disso, nos permite preencher as variáveis ​​necessárias para construir nosso componente. Assim, estou mantendo o código o mais enxuto possível.

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

});

A partir daqui, agora podemos configurar um método que criará um componente e retornará o resultado que nos permitirá anexá-lo ao DOM.

Juntando tudo

Com base no código acima, deve ficar relativamente claro o que você precisa fazer para criar o componente.

Mesmo assim, juntar tudo é um processo que requer o seguinte:

1. fazendo o pedido,
2. lendo a resposta,
3. construindo um componente com base na resposta

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

O código acima deve ser autoexplicativo, mas se não estiver fazendo o seguinte :

1. Obtendo informações da resposta, como título, URL da imagem e descrição,
2. criando elementos de cada um deles,
3. anexando-os a um elemento div
4. retornando o  elemento div após as várias partes terem sido anexadas a ele.

A partir daí, você pode pegar o elemento – o componente – e anexá-lo a um contêiner (como mostrado anteriormente no código) e continuar fazendo isso com o restante das informações da resposta.

Usando outras tecnologias JavaScript?

Como mencionado no início do post, é muito trabalho em relação ao jQuery para criar um componente para adicionar ao DOM.

Combine isso com a natureza responsiva (não responsiva em termos de design móvel, mas em termos de partes de uma tela que respondem a mudanças na camada de apresentação), e você tem um bom argumento para usar uma tecnologia diferente para fazer algo assim.

Mas ainda assim, existem aqueles projetos que exigem uma certa pilha, e se o jQuery fizer parte dessa pilha, então essa é uma maneira de seguir em frente e fazer exatamente isso.