JQuery komponentide loomine WordPressis

Esiotsa arendus on CSS-i eelprotsessorite ja erinevate JavaScriptil põhinevate tehnoloogiate kasutamise kaudu viimase paari aasta jooksul (ja teeb seda jätkuvalt) suuri edusamme.

Tore on see, et neid kõiki saab WordPressi arendamise kontekstis siiski kasutada; kuid kuna WordPress sisaldab jQueryt, pole haruldane jätkata jQuery-põhise JavaScripti kirjutamist.

Vaatamata kõigile erinevatele tehnoloogiatele (nt Angular, Vue, React jne), leian, et kasutan jQueryt ja ES6 siiski rohkem kui teisi teeke ja tööriistu.

Lihtsate ülesannete puhul pole see probleem, kuid kui on vaja näiteks API-kõne vastuse põhjal luua täpsemaid komponente, võib jQuery kasutamine olla pisut raskem.

See ei tähenda, et seda ei saaks kasutada – ja ma kirjeldan, kuidas seda kasutada komponentide hetkeliseks dünaamiliseks koostamiseks –, kuid ma arvan, et see näitab, millal muud valikud on muutlikumad.

Aga sellest pikemalt postituse lõpus.

JQuery komponentide loomine WordPressis

Kui ma viitan komponendi ideele, pean ma silmas elementide kombinatsiooni, mis töötavad koos keerukama elemendi loomiseks.

Oletame näiteks, et teete API-kõne ja seejärel peate vastuse abil looma komponendi, mis koosneb muudest elementidest.

Komponendi määratlemine ja joonistamine

Alustuseks arvan, et see on hea viis komponendi määratlemiseks: element, mis koosneb elementide kombinatsioonist.

Vähemalt seda kavatsen ma selle postituse puhul kasutada.

Järgmiseks, kuidas saaksime seda enne kodifitseerimist visualiseerida? Võib-olla midagi sellist:

Jällegi, kõik see põhineb ideel teha API päring ja töötada andmete kallal.

API-kõne tegemine

API-kõne tegemine WordPress API abil on midagi, mida olen käsitlenud mõnes postituses (ja kui otsite selleks kõige turvalisemat viisi, siis soovitan seda postitust lugeda ).

Kuid juhtimisvoog näeks välja umbes selline:

Ja selle toimimise kood näeks välja umbes selline :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Kuid see ei vii meid ikkagi selleni, et koostame vastuse põhjal komponenti.

Vastusega töötamine

See järgmine osa on kõik, kuidas valite JavaScripti kirjutamise. Ma ei väida, et see, kuidas ma teen, on viis, kuidas seda teha, kuid see on viis seda teha.

Igatahes eeldame selle postituse jaoks, et saame API-lt tagasi mõned andmed ja et meil on need tagatud (see takistab meil kaitseklausleid kirjutamast).

Lisaks võimaldab see meil täita oma komponendi koostamiseks vajalikke muutujaid. Seega hoian koodi võimalikult lahjana.

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

});

Siit saame nüüd seadistada meetodi, mis loob komponendi ja tagastab tulemuse, mis võimaldab meil selle DOM-i lisada.

Kõike kokku panema

Ülaltoodud koodi põhjal peaks olema suhteliselt selge, mida peate komponendi loomiseks tegema.

Sellegipoolest on selle kõige kokkupanek protsess, mis nõuab järgmist.

1. taotluse esitamine,
2. vastust lugedes,
3. vastuse põhjal komponendi ehitamine

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

Ülaltoodud kood peaks olema iseenesestmõistetav, kuid kui mitte, teeb see järgmist :

1. Võttes vastusest teavet, nagu pealkiri, pildi URL ja kirjeldus,
2. luues neist igaühe elemente,
3. lisades need elemendile div
4. elemendi div tagastamine pärast erinevate osade lisamist.

Sealt saate seejärel võtta elemendi – komponendi – ja lisada selle konteinerisse (nagu koodis varem näidatud) ja seejärel jätkata seda ülejäänud vastuse teabega.

Kas kasutate muid JavaScripti tehnoloogiaid?

Nagu postituse alguses mainitud, on jQueryga palju tööd, et luua DOM-ile lisatav komponent.

Kombineerige see tundliku olemusega (mitte tundlik mobiilse disaini osas, vaid kuvari osade osas, mis reageerivad esitluskihi muutustele) ja teil on üsna hea võimalus kasutada midagi sellist teha teistsugust tehnoloogiat.

Kuid siiski on projekte, mis nõuavad teatud pinu, ja kui jQuery on selle virna osa, on see üks võimalus edasi minna ja just seda teha.