Skapa jQuery-komponenter i WordPress

Front-end-utvecklingen har tagit stora framsteg under de senaste åren (och fortsätter att göra det) genom användning av CSS-förprocessorer och olika JavaScript-baserade teknologier.

Det fina är att alla dessa fortfarande kan användas inom ramen för WordPress-utveckling; Men eftersom WordPress innehåller jQuery är det inte ovanligt att fortsätta skriva jQuery-baserat JavaScript.

Trots alla olika teknologier (som Angular, Vue, React, etc.) använder jag fortfarande jQuery och ES6 mer än andra bibliotek och verktyg.

För enkla uppgifter är det inga problem, men när man behöver bygga mer avancerade komponenter baserat på svaret från ett API-anrop kan det vara lite tungt att använda jQuery.

Detta betyder inte att det inte kan användas – och jag ska gå igenom hur man använder det för att bygga komponenter momentant dynamiskt – men jag tror att det presenterar ett fall om när andra alternativ är mer varierande.

Men mer om det i slutet av inlägget.

Skapa jQuery-komponenter i WordPress

När jag hänvisar till idén om en komponent, tänker jag på en kombination av element som samverkar för att skapa ett mer komplext element.

Låt oss till exempel säga att du gör ett API-anrop och sedan, med hjälp av svaret, måste du skapa en komponent som består av andra element.

Definiera och rita en komponent

Så till att börja med tycker jag att det är ett bra sätt att definiera en komponent: Ett element som består av en kombination av element.

Det är åtminstone vad jag kommer att använda för just detta inlägg.

Därefter, hur kan vi visualisera detta i termer innan vi kodifierar det? Kanske något sånt här:

Återigen, allt detta är baserat på idén att göra en API-förfrågan och arbeta med data.

Ringa API-anropet

Att göra ett API-anrop med hjälp av WordPress API är något som jag har tagit upp i några inlägg (och om du letar efter det säkraste sättet att göra det, rekommenderar jag att du läser det här inlägget ).

Men kontrollflödet skulle se ut ungefär så här:

Och koden för att göra det skulle se ut ungefär så här :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Men det leder faktiskt inte till att vi bygger komponenten från svaret.

Arbeta med Responsen

Den här nästa biten är hur du väljer att skriva ditt JavaScript. Jag påstår inte att sättet jag gör är sättet att göra det, men det är ett sätt att göra det.

Hur som helst, för det här inlägget antar vi att vi kommer att få tillbaka lite data från API:t och att vi garanterat har det (detta hindrar oss från att behöva skriva skyddsklausuler).

Vidare tillåter det oss att fylla i de nödvändiga variablerna för att bygga vår komponent. Därför håller jag koden så mager som möjligt.

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

});

Härifrån kan vi nu ställa in en metod som skapar en komponent och returnerar resultatet som gör att vi kan lägga till den till DOM.

Sätta ihop allting

Baserat på koden ovan bör det vara relativt tydligt vad du behöver göra för att skapa komponenten.

Ändå är att sätta ihop allt en process som kräver följande:

1. göra begäran,
2. läser svaret,
3. bygga en komponent baserat på svaret

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

Koden ovan bör vara självförklarande, men om inte gör den följande :

1. Ta information från svaret som titel, bildadress och beskrivning,
2. skapa delar av var och en av dessa,
3. lägga till dem i ett div- element
4. returnera div- elementet efter att de olika delarna har lagts till det.

Därifrån kan du sedan ta elementet – komponenten – och lägga till det i en container (som visas tidigare i koden) och sedan fortsätta att göra det med resten av informationen från svaret.

Använder du annan JavaScript-teknik?

Som nämnts i början av inlägget är detta mycket arbete gällande jQuery att skapa en komponent att lägga till i DOM.

Kombinera detta med den lyhörda naturen (inte lyhörd när det gäller mobildesign utan när det gäller delar av en skärm som reagerar på förändringar i presentationslagret), och du har ett ganska bra argument för att använda en annan teknik för att göra något liknande.

Men ändå finns det de projekt som kräver en viss stack, och om jQuery är en del av den stacken, så är detta ett sätt att gå vidare och göra just det.