Creazione di componenti jQuery in WordPress

Lo sviluppo del front-end ha fatto grandi passi avanti negli ultimi due anni (e continua a farlo) attraverso l’uso di preprocessori CSS e varie tecnologie basate su JavaScript.

La cosa bella è che tutti questi possono ancora essere utilizzati nel contesto dello sviluppo di WordPress; tuttavia, poiché WordPress include jQuery, non è raro continuare a scrivere JavaScript basato su jQuery.

Nonostante tutte le varie tecnologie (come Angular, Vue, React, ecc.), mi ritrovo ancora a utilizzare jQuery ed ES6 più di altre librerie e strumenti.

Per le attività semplici, non è un problema, ma quando è necessario, ad esempio, creare componenti più avanzati basati sulla risposta di una chiamata API, l’utilizzo di jQuery può essere un po’ pesante.

Ciò non significa che non possa essere utilizzato – e illustrerò come utilizzarlo per creare componenti momentaneamente in modo dinamico – ma penso che rappresenti un caso in cui le altre opzioni sono più variabili.

Ma ne parleremo più alla fine del post.

Creazione di componenti jQuery in WordPress

Ogni volta che mi riferisco all’idea di un componente, penso a una combinazione di elementi che lavorano insieme per creare un elemento più complesso.

Ad esempio, supponiamo di effettuare una chiamata API e quindi, utilizzando la risposta, è necessario creare un componente composto da altri elementi.

Definizione e disegno di un componente

Quindi, per cominciare, penso che sia un buon modo per definire un componente: un elemento composto da una combinazione di elementi.

Almeno questo è quello che userò per questo particolare post.

Quindi, come potremmo visualizzarlo in termini prima di codificarlo? Forse qualcosa del genere:

Ancora una volta, tutto questo si basa sull’idea di fare una richiesta API e lavorare sui dati.

Effettuare la chiamata API

Fare una chiamata API utilizzando l’API di WordPress è qualcosa che ho trattato in alcuni post (e se stai cercando il modo più sicuro per farlo, ti consiglio di leggere questo post ).

Ma il flusso di controllo sarebbe simile a questo:

E il codice per farlo sarebbe simile a questo :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Ma questo non ci porta ancora al punto di costruire il componente dalla risposta.

Lavorare con la risposta

Questo bit successivo è tutto il modo in cui scegli di scrivere il tuo JavaScript. Non sto affermando che il modo in cui lo faccio è il modo per farlo, ma è un modo per farlo.

Ad ogni modo, per questo post supponiamo che recupereremo alcuni dati dall’API e che abbiamo la garanzia di averli (questo ci impedisce di dover scrivere clausole di guardia).

Inoltre, ci consente di popolare le variabili necessarie per costruire il nostro componente. Pertanto, sto mantenendo il codice il più snello possibile.

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

});

Da qui, ora possiamo impostare un metodo che creerà un componente e restituirà il risultato che ci consentirà di aggiungerlo al DOM.

Mettere tutto insieme

Sulla base del codice sopra, dovrebbe essere relativamente chiaro cosa devi fare per creare il componente.

Tuttavia, mettere tutto insieme è un processo che richiede quanto segue:

1. facendo la richiesta,
2. leggendo la risposta,
3. costruire un componente in base alla risposta

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

Il codice sopra dovrebbe essere autoesplicativo, ma in caso contrario sta facendo quanto segue :

1. Prendendo informazioni dalla risposta come il titolo, l’URL dell’immagine e la descrizione,
2. creando elementi di ciascuno di essi,
3. aggiungendoli a un elemento div
4. restituendo l’  elemento div dopo che i vari pezzi sono stati aggiunti ad esso.

Da lì, puoi quindi prendere l’elemento – il componente – e aggiungerlo a un contenitore (come mostrato in precedenza nel codice) e quindi continuare a farlo con il resto delle informazioni dalla risposta.

Utilizzi altre tecnologie JavaScript?

Come accennato all’inizio del post, questo è molto lavoro per quanto riguarda jQuery per creare un componente da aggiungere al DOM.

Combina questo con la natura reattiva (non reattiva in termini di design mobile ma in termini di parti di un display che rispondono ai cambiamenti nel livello di presentazione) e hai un buon motivo per utilizzare una tecnologia diversa per fare qualcosa del genere.

Tuttavia, ci sono quei progetti che richiederanno un determinato stack e se jQuery fa parte di quello stack, allora questo è un modo per andare avanti e fare proprio questo.