{"id":230303,"date":"2022-11-17T11:10:00","date_gmt":"2022-11-17T08:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230303"},"modified":"2022-11-17T11:18:19","modified_gmt":"2022-11-17T08:18:19","slug":"creazione-di-componenti-jquery-in-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/creazione-di-componenti-jquery-in-wordpress\/","title":{"rendered":"Creazione di componenti jQuery in WordPress"},"content":{"rendered":"\n

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

La cosa bella \u00e8 che tutti questi possono ancora essere utilizzati nel contesto dello sviluppo di WordPress; tuttavia, poich\u00e9 WordPress include jQuery, non \u00e8 raro continuare a scrivere JavaScript basato su jQuery.<\/p>\n

Nonostante tutte le varie tecnologie (come Angular<\/a>, Vue<\/a>, React<\/a>, ecc.), mi ritrovo ancora a utilizzare jQuery<\/a> ed ES6<\/a> pi\u00f9 di altre librerie e strumenti.<\/p>\n

Per le attivit\u00e0 semplici, non \u00e8 un problema, ma quando \u00e8 necessario, ad esempio, creare componenti pi\u00f9 avanzati basati sulla risposta di una chiamata API, l’utilizzo di jQuery pu\u00f2 essere un po’ pesante.<\/p>\n

Ci\u00f2 non significa che non possa essere utilizzato – e illustrer\u00f2 come utilizzarlo per creare componenti momentaneamente in modo dinamico – ma penso che rappresenti un caso in cui le altre opzioni sono pi\u00f9 variabili.<\/p>\n

Ma ne parleremo pi\u00f9 alla fine del post.<\/p>\n

Creazione di componenti jQuery in WordPress<\/h2>\n

Ogni volta che mi riferisco all’idea di un componente, penso a una combinazione di elementi che lavorano insieme per creare un elemento pi\u00f9 complesso.<\/p>\n

Ad esempio, supponiamo di effettuare una chiamata API e quindi, utilizzando la risposta, \u00e8 necessario creare un componente composto da altri elementi.<\/p>\n

Definizione e disegno di un componente<\/h3>\n

Quindi, per cominciare, penso che sia un buon modo per definire un componente: un elemento composto da una combinazione di elementi.<\/p>\n

Almeno questo \u00e8 quello che user\u00f2 per questo particolare post.<\/p>\n

Quindi, come potremmo visualizzarlo in termini prima di codificarlo? Forse qualcosa del genere:<\/p>\n

Ancora una volta, tutto questo si basa sull’idea di fare una richiesta API e lavorare sui dati.<\/p>\n

Effettuare la chiamata API<\/h3>\n

Fare una chiamata API utilizzando l’API di WordPress \u00e8 qualcosa che ho trattato in alcuni post (e se stai cercando il modo pi\u00f9 sicuro per farlo, ti consiglio di leggere questo post<\/a> ).<\/p>\n

Ma il flusso di controllo sarebbe simile a questo:<\/p>\n

\"Creazione<\/a><\/p>\n

E il codice per farlo sarebbe simile a questo<\/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
Ma questo non ci porta ancora al punto di costruire il componente dalla risposta.<\/p>\n
Lavorare con la risposta<\/h3>\n
Questo bit successivo \u00e8 tutto il modo in cui scegli di scrivere il tuo JavaScript. Non sto affermando che il modo in cui lo faccio \u00e8 il modo per farlo, ma \u00e8 un modo per farlo.<\/p>\n
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).<\/p>\n
Inoltre, ci consente di popolare le variabili necessarie per costruire il nostro componente. Pertanto, sto mantenendo il codice il pi\u00f9 snello possibile<\/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
Da qui, ora possiamo impostare un metodo che creer\u00e0 un componente e restituir\u00e0 il risultato che ci consentir\u00e0 di aggiungerlo al DOM.<\/p>\n
Mettere tutto insieme<\/h3>\n
Sulla base del codice sopra, dovrebbe essere relativamente chiaro cosa devi fare per creare il componente.<\/p>\n
Tuttavia, mettere tutto insieme \u00e8 un processo che richiede quanto segue:<\/p>\n
    \n
  1. facendo la richiesta,<\/li>\n
  2. leggendo la risposta,<\/li>\n
  3. costruire un componente in base alla risposta<\/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
    Il codice sopra dovrebbe essere autoesplicativo, ma in caso contrario sta facendo quanto segue<\/a> :<\/p>\n
      \n
    1. Prendendo informazioni dalla risposta come il titolo, l’URL dell’immagine e la descrizione,<\/li>\n
    2. creando elementi di ciascuno di essi,<\/li>\n
    3. aggiungendoli a un elemento div<\/strong><\/li>\n
    4. restituendo l’\u00a0 elemento div<\/strong> dopo che i vari pezzi sono stati aggiunti ad esso.<\/li>\n<\/ol>\n
      Da l\u00ec, 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.<\/p>\n
      Utilizzi altre tecnologie JavaScript?<\/h2>\n
      Come accennato all’inizio del post, questo \u00e8 molto lavoro per quanto riguarda jQuery per creare un componente da aggiungere al DOM.<\/p>\n
      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.<\/p>\n
      Tuttavia, ci sono quei progetti che richiederanno un determinato stack e se jQuery fa parte di quello stack, allora questo \u00e8 un modo per andare avanti e fare proprio questo.<\/p>\n
      Fonte di registrazione:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Sebbene altre tecnologie possano essere pi\u00f9 adatte a questo, ecco come creare componenti jQuery in WordPress da utilizzare quando si lavora con 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":[918,731,720,844],"tags":[1168],"class_list":["post-230303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-javascript-6","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230303"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}