Creación de componentes jQuery en WordPress

El desarrollo front-end ha dado grandes pasos en los últimos años (y continúa haciéndolo) mediante el uso de preprocesadores CSS y varias tecnologías basadas en JavaScript.

Lo bueno es que todos estos todavía se pueden usar en el contexto del desarrollo de WordPress; sin embargo, dado que WordPress incluye jQuery, no es raro continuar escribiendo JavaScript basado en jQuery.

A pesar de todas las diversas tecnologías (como Angular, Vue, React, etc.), sigo usando jQuery y ES6 más que otras bibliotecas y herramientas.

Para tareas simples, no es un problema, pero cuando se necesita, por ejemplo, construir componentes más avanzados basados ​​en la respuesta de una llamada API, usar jQuery puede ser un poco complicado.

Esto no significa que no se pueda usar, y explicaré cómo usarlo para construir componentes momentáneamente de forma dinámica, pero creo que presenta un caso en el que otras opciones son más variables.

Pero más sobre eso al final de la publicación.

Creación de componentes jQuery en WordPress

Cada vez que me refiero a la idea de un componente, estoy pensando en una combinación de elementos que trabajan juntos para crear un elemento más complejo.

Por ejemplo, supongamos que realiza una llamada a la API y luego, utilizando la respuesta, necesita crear un componente compuesto por otros elementos.

Definición y dibujo de un componente

Entonces, para empezar, creo que es una buena manera de definir un componente: un elemento que se compone de una combinación de elementos.

Al menos eso es lo que voy a usar para esta publicación en particular.

A continuación, ¿cómo podríamos visualizar esto en términos antes de codificarlo? Tal vez algo como esto:

Nuevamente, todo esto se basa en la idea de realizar una solicitud de API y trabajar en los datos.

Hacer la llamada a la API

Hacer una llamada API usando la API de WordPress es algo que he cubierto en algunas publicaciones (y si está buscando la forma más segura de hacerlo, le recomiendo leer esta publicación ).

Pero el flujo de control se vería así:

Y el código para hacerlo sería algo como esto :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Pero eso todavía no nos lleva al punto de construir el componente a partir de la respuesta.

Trabajar con la respuesta

El siguiente bit es todo sobre cómo optas por escribir tu JavaScript. No estoy afirmando que la forma en que lo hago sea la forma de hacerlo, pero es una forma de hacerlo.

De todos modos, para esta publicación, suponga que vamos a recuperar algunos datos de la API y que tenemos la garantía de tenerlos (esto nos evita tener que escribir cláusulas de protección).

Además, nos permite completar las variables necesarias para construir nuestro componente. Por lo tanto, mantengo el código lo más simple posible.

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

});

Desde aquí, ahora podemos configurar un método que creará un componente y devolverá el resultado que nos permitirá agregarlo al DOM.

Poniendolo todo junto

Según el código anterior, debería quedar relativamente claro lo que debe hacer para crear el componente.

Aún así, ponerlo todo junto es un proceso que requiere lo siguiente:

1. haciendo la solicitud,
2. leyendo la respuesta,
3. construir un componente basado en la respuesta

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

El código anterior debería explicarse por sí mismo, pero si no, está haciendo lo siguiente :

1. Tomando información de la respuesta, como el título, la URL de la imagen y la descripción,
2. creando elementos de cada uno de ellos,
3. añadiéndolos a un elemento div
4. devolver el  elemento div después de que se le hayan agregado las distintas piezas.

A partir de ahí, puede tomar el elemento, el componente, y agregarlo a un contenedor (como se muestra anteriormente en el código) y luego continuar haciéndolo con el resto de la información de la respuesta.

¿Utiliza otras tecnologías de JavaScript?

Como se mencionó al comienzo de la publicación, se trata de mucho trabajo con respecto a jQuery para crear un componente para agregar al DOM.

Combine esto con la naturaleza receptiva (no receptiva en términos de diseño móvil sino en términos de partes de una pantalla que responden a cambios en la capa de presentación), y tiene un caso bastante bueno para usar una tecnología diferente para hacer algo como esto.

Pero aún así, hay proyectos que requerirán una cierta pila, y si jQuery es parte de esa pila, entonces esta es una forma de seguir adelante y hacer precisamente eso.