Création de composants jQuery dans WordPress

Le développement frontal a fait de grands progrès au cours des deux dernières années (et continue de le faire) grâce à l’utilisation de préprocesseurs CSS et de diverses technologies basées sur JavaScript.

La bonne chose est que tous ces éléments peuvent toujours être utilisés dans le contexte du développement WordPress ; Cependant, étant donné que WordPress inclut jQuery, il n’est pas rare de continuer à écrire du JavaScript basé sur jQuery.

Malgré toutes les différentes technologies (telles que Angular, Vue, React, etc.), je me retrouve toujours à utiliser jQuery et ES6 plus que d’autres bibliothèques et outils.

Pour les tâches simples, ce n’est pas un problème, mais lorsqu’il faut, par exemple, créer des composants plus avancés basés sur la réponse d’un appel d’API, l’utilisation de jQuery peut être un peu lourde.

Cela ne signifie pas qu’il ne peut pas être utilisé – et je vais expliquer comment l’utiliser pour créer momentanément des composants de manière dynamique – mais je pense que cela présente un cas où d’autres options sont plus variables.

Mais plus à ce sujet à la fin du post.

Création de composants jQuery dans WordPress

Chaque fois que je fais référence à l’idée d’un composant, je pense à une combinaison d’éléments qui fonctionnent ensemble pour créer un élément plus complexe.

Par exemple, supposons que vous fassiez un appel d’API, puis, à l’aide de la réponse, vous deviez créer un composant composé d’autres éléments.

Définir et dessiner un composant

Donc, pour commencer, je pense que c’est une bonne façon de définir un composant : un élément composé d’une combinaison d’éléments.

C’est du moins ce que je vais utiliser pour ce post particulier.

Ensuite, comment pourrions-nous visualiser cela en termes avant de le codifier ? Peut-être quelque chose comme ça :

Encore une fois, tout cela est basé sur l’idée de faire une requête API et de travailler sur les données.

Faire l’appel API

Faire un appel API à l’aide de l’API WordPress est quelque chose que j’ai couvert dans certains articles (et si vous cherchez le moyen le plus sûr de le faire, je vous recommande de lire cet article ).

Mais le flux de contrôle ressemblerait à ceci :

Et le code pour le faire ressemblerait à ceci :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Mais cela ne nous amène toujours pas au point de construire le composant à partir de la réponse.

Travailler avec la réponse

Ce prochain bit est tout comment vous choisissez d’écrire votre JavaScript. Je ne prétends pas que ma façon de faire est la façon de le faire, mais c’est une façon de le faire.

Quoi qu’il en soit, pour cet article, supposons que nous allons récupérer des données de l’API et que nous sommes assurés de les avoir (cela nous évite d’avoir à écrire des clauses de garde).

De plus, cela nous permet de remplir les variables nécessaires pour construire notre composant. Ainsi, je garde le code aussi léger que possible.

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

});

À partir de là, nous pouvons maintenant configurer une méthode qui créera un composant et renverra le résultat qui nous permettra de l’ajouter au DOM.

Mettre tous ensemble

Sur la base du code ci-dessus, il devrait être relativement clair de ce que vous devez faire pour créer le composant.

Même encore, tout mettre ensemble est un processus qui nécessite ce qui suit :

1. faire la demande,
2. lecture de la réponse,
3. construire un composant basé sur la réponse

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

Le code ci-dessus devrait être explicite, mais sinon, il fait ce qui suit :

1. Prendre des informations de la réponse telles que le titre, l’URL de l’image et la description,
2. créer des éléments de chacun de ceux-ci,
3. en les ajoutant à un élément div
4. renvoyant l’  élément div après que les différentes pièces lui aient été ajoutées.

À partir de là, vous pouvez ensuite prendre l’élément – le composant – et l’ajouter à un conteneur (comme indiqué précédemment dans le code), puis continuer à le faire avec le reste des informations de la réponse.

Vous utilisez d’autres technologies JavaScript ?

Comme mentionné au début du post, c’est beaucoup de travail concernant jQuery pour créer un composant à ajouter au DOM.

Combinez cela avec la nature réactive (pas réactive en termes de conception mobile mais en termes de parties d’un affichage répondant aux changements dans la couche de présentation), et vous avez un assez bon cas pour utiliser une technologie différente pour faire quelque chose comme ça.

Mais encore, il y a ces projets qui appelleront une certaine pile, et si jQuery fait partie de cette pile, alors c’est une façon d’aller de l’avant et de faire exactement cela.