{"id":229968,"date":"2022-11-17T11:48:00","date_gmt":"2022-11-17T08:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229968"},"modified":"2022-11-17T11:48:39","modified_gmt":"2022-11-17T08:48:39","slug":"creation-de-composants-jquery-dans-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creation-de-composants-jquery-dans-wordpress\/","title":{"rendered":"Cr\u00e9ation de composants jQuery dans WordPress"},"content":{"rendered":"\n

Le d\u00e9veloppement frontal a fait de grands progr\u00e8s au cours des deux derni\u00e8res ann\u00e9es (et continue de le faire) gr\u00e2ce \u00e0 l’utilisation de pr\u00e9processeurs CSS<\/a> et de diverses technologies bas\u00e9es sur JavaScript.<\/p>\n

La bonne chose est que tous ces \u00e9l\u00e9ments peuvent toujours \u00eatre utilis\u00e9s dans le contexte du d\u00e9veloppement WordPress ; Cependant, \u00e9tant donn\u00e9 que WordPress inclut jQuery, il n’est pas rare de continuer \u00e0 \u00e9crire du JavaScript bas\u00e9 sur jQuery.<\/p>\n

Malgr\u00e9 toutes les diff\u00e9rentes technologies (telles que Angular<\/a>, Vue<\/a>, React<\/a>, etc.), je me retrouve toujours \u00e0 utiliser jQuery<\/a> et ES6<\/a> plus que d’autres biblioth\u00e8ques et outils.<\/p>\n

Pour les t\u00e2ches simples, ce n’est pas un probl\u00e8me, mais lorsqu’il faut, par exemple, cr\u00e9er des composants plus avanc\u00e9s bas\u00e9s sur la r\u00e9ponse d’un appel d’API, l’utilisation de jQuery peut \u00eatre un peu lourde.<\/p>\n

Cela ne signifie pas qu’il ne peut pas \u00eatre utilis\u00e9 – et je vais expliquer comment l’utiliser pour cr\u00e9er momentan\u00e9ment des composants de mani\u00e8re dynamique – mais je pense que cela pr\u00e9sente un cas o\u00f9 d’autres options sont plus variables.<\/p>\n

Mais plus \u00e0 ce sujet \u00e0 la fin du post.<\/p>\n

Cr\u00e9ation de composants jQuery dans WordPress<\/h2>\n

Chaque fois que je fais r\u00e9f\u00e9rence \u00e0 l’id\u00e9e d’un composant, je pense \u00e0 une combinaison d’\u00e9l\u00e9ments qui fonctionnent ensemble pour cr\u00e9er un \u00e9l\u00e9ment plus complexe.<\/p>\n

Par exemple, supposons que vous fassiez un appel d’API, puis, \u00e0 l’aide de la r\u00e9ponse, vous deviez cr\u00e9er un composant compos\u00e9 d’autres \u00e9l\u00e9ments.<\/p>\n

D\u00e9finir et dessiner un composant<\/h3>\n

Donc, pour commencer, je pense que c’est une bonne fa\u00e7on de d\u00e9finir un composant\u00a0: un \u00e9l\u00e9ment compos\u00e9 d’une combinaison d’\u00e9l\u00e9ments.<\/p>\n

C’est du moins ce que je vais utiliser pour ce post particulier.<\/p>\n

Ensuite, comment pourrions-nous visualiser cela en termes avant de le codifier\u00a0? Peut-\u00eatre quelque chose comme \u00e7a :<\/p>\n

Encore une fois, tout cela est bas\u00e9 sur l’id\u00e9e de faire une requ\u00eate API et de travailler sur les donn\u00e9es.<\/p>\n

Faire l’appel API<\/h3>\n

Faire un appel API \u00e0 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\u00fbr de le faire, je vous recommande de lire cet article<\/a> ).<\/p>\n

Mais le flux de contr\u00f4le ressemblerait \u00e0 ceci\u00a0:<\/p>\n

\"Cr\u00e9ation<\/a><\/p>\n

Et le code pour le faire ressemblerait \u00e0 ceci<\/a> :<\/p>\n

$.get(acme_ajax_object.ajax_url, {\n\n  action:   'get_data',\n  security: acme_ajax_object.security\n\n}, function(response) {\n\n  \/\/ More to come...\n\n});<\/code><\/pre>\n
Mais cela ne nous am\u00e8ne toujours pas au point de construire le composant \u00e0 partir de la r\u00e9ponse.<\/p>\n
Travailler avec la r\u00e9ponse<\/h3>\n
Ce prochain bit est tout comment vous choisissez d’\u00e9crire votre JavaScript. Je ne pr\u00e9tends pas que ma fa\u00e7on de faire est la fa\u00e7on de le faire, mais c’est une fa\u00e7on de le faire.<\/p>\n
Quoi qu’il en soit, pour cet article, supposons que nous allons r\u00e9cup\u00e9rer des donn\u00e9es de l’API et que nous sommes assur\u00e9s de les avoir (cela nous \u00e9vite d’avoir \u00e0 \u00e9crire des clauses de garde).<\/p>\n
De plus, cela nous permet de remplir les variables n\u00e9cessaires pour construire notre composant. Ainsi, je garde le code aussi l\u00e9ger que possible<\/a>.<\/p>\n
var $container = $('#component-container'),\n    i, l       = 0;\n\n$.get(acme_ajax_object.ajax_url, {\n\n  action:   'get_data',\n  security: acme_ajax_object.security\n\n}, function( response) {\n\n  for( i = 0, l = response.data.length; i < l; i++) {\n    $container.append(\n      _createComponent(response.data[i])\n    );\n  }\n\n});<\/code><\/pre>\n
\u00c0 partir de l\u00e0, nous pouvons maintenant configurer une m\u00e9thode qui cr\u00e9era un composant et renverra le r\u00e9sultat qui nous permettra de l’ajouter au DOM.<\/p>\n
Mettre tous ensemble<\/h3>\n
Sur la base du code ci-dessus, il devrait \u00eatre relativement clair de ce que vous devez faire pour cr\u00e9er le composant.<\/p>\n
M\u00eame encore, tout mettre ensemble est un processus qui n\u00e9cessite ce qui suit\u00a0:<\/p>\n
    \n
  1. faire la demande,<\/li>\n
  2. lecture de la r\u00e9ponse,<\/li>\n
  3. construire un composant bas\u00e9 sur la r\u00e9ponse<\/li>\n<\/ol>\n
    \/**\n * Creates a component to be added from the DOM based on the incoming data.\n *\n * For the purposes of this function, we're assuming there are several properties\n * on data of which we're already aware.\n *\n * @param data  The object containing the properties we need for the component.\n *\n * @return      The component created from the incoming data.\n *\/\nfunction _createComponent(data) {\n\n  var title       = data.title,\n      imageUrl    = data.imageUrl,\n      description = data.description,\n      $component  = $('<div ><\/div>');\n\n  $component\n    .append(\n      $('<p ><\/p>').text(title)) .append(\n      $('<img \/>').attr('src', imageUrl)) .append(\n      $('<p ><\/p>').text(description)\n    );\n\n  return $component;\n}<\/code><\/pre>\n
    Le code ci-dessus devrait \u00eatre explicite, mais sinon, il fait ce qui suit<\/a>\u00a0:<\/p>\n
      \n
    1. Prendre des informations de la r\u00e9ponse telles que le titre, l’URL de l’image et la description,<\/li>\n
    2. cr\u00e9er des \u00e9l\u00e9ments de chacun de ceux-ci,<\/li>\n
    3. en les ajoutant \u00e0 un \u00e9l\u00e9ment div<\/strong><\/li>\n
    4. renvoyant l’\u00a0 \u00e9l\u00e9ment div<\/strong> apr\u00e8s que les diff\u00e9rentes pi\u00e8ces lui aient \u00e9t\u00e9 ajout\u00e9es.<\/li>\n<\/ol>\n
      \u00c0 partir de l\u00e0, vous pouvez ensuite prendre l’\u00e9l\u00e9ment – le composant – et l’ajouter \u00e0 un conteneur (comme indiqu\u00e9 pr\u00e9c\u00e9demment dans le code), puis continuer \u00e0 le faire avec le reste des informations de la r\u00e9ponse.<\/p>\n
      Vous utilisez d’autres technologies JavaScript\u00a0?<\/h2>\n
      Comme mentionn\u00e9 au d\u00e9but du post, c’est beaucoup de travail concernant jQuery pour cr\u00e9er un composant \u00e0 ajouter au DOM.<\/p>\n
      Combinez cela avec la nature r\u00e9active (pas r\u00e9active en termes de conception mobile mais en termes de parties d’un affichage r\u00e9pondant aux changements dans la couche de pr\u00e9sentation), et vous avez un assez bon cas pour utiliser une technologie diff\u00e9rente pour faire quelque chose comme \u00e7a.<\/p>\n
      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\u00e7on d’aller de l’avant et de faire exactement cela.<\/p>\n
      Source d’enregistrement:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Bien que d’autres technologies puissent \u00eatre mieux adapt\u00e9es \u00e0 cela, voici comment cr\u00e9er des composants jQuery dans WordPress \u00e0 utiliser lorsque vous travaillez avec Ajax.<\/p>\n","protected":false},"author":1,"featured_media":224394,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,728,841],"tags":[1167],"class_list":["post-229968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-javascript-3","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=229968"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229968\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}