jQuery-komponenttien luominen WordPressissä

Etupään kehitys on ottanut suuria harppauksia parin viime vuoden aikana (ja tekee niin edelleen) CSS-esiprosessorien ja erilaisten JavaScript-pohjaisten tekniikoiden käytön ansiosta.

Hienoa on, että kaikkia näitä voidaan edelleen käyttää WordPress-kehityksen yhteydessä; Koska WordPress kuitenkin sisältää jQueryn, ei ole harvinaista jatkaa jQuery-pohjaisen JavaScriptin kirjoittamista.

Huolimatta kaikista erilaisista teknologioista (kuten Angular, Vue, React jne.), huomaan silti käyttäväni jQueryä ja ES6 :ta enemmän kuin muita kirjastoja ja työkaluja.

Yksinkertaisissa tehtävissä se ei ole ongelma, mutta kun on esimerkiksi rakennettava edistyneempiä komponentteja API-kutsun vastauksen perusteella, jQueryn käyttö voi olla hieman raskasta.

Tämä ei tarkoita, ettei sitä voisi käyttää – ja käyn läpi, kuinka sitä käytetään komponenttien rakentamiseen hetkellisesti dynaamisesti – mutta mielestäni se on esimerkki siitä, milloin muut vaihtoehdot ovat vaihtelevampia.

Mutta siitä lisää postauksen lopussa.

jQuery-komponenttien luominen WordPressissä

Aina kun viittaan komponentin ideaan, ajattelen elementtien yhdistelmää, joka toimii yhdessä luodakseen monimutkaisemman elementin.

Oletetaan esimerkiksi, että soitat API-kutsun ja sitten vastauksen avulla sinun on luotava komponentti, joka koostuu muista elementeistä.

Komponentin määrittäminen ja piirtäminen

Joten aluksi, mielestäni tämä on hyvä tapa määritellä komponentti: elementti, joka koostuu elementtien yhdistelmästä.

Ainakin sitä aion käyttää tässä postauksessa.

Seuraavaksi, kuinka voisimme visualisoida tämän termein ennen sen kodifiointia? Ehkä jotain tämän kaltaista:

Jälleen kaikki tämä perustuu ajatukseen API-pyynnön tekemisestä ja tietojen käsittelystä.

API-puhelun tekeminen

Olen käsitellyt joissakin viesteissä API-kutsun soittamista WordPress-sovellusliittymän avulla (ja jos etsit turvallisinta tapaa tehdä se, suosittelen tämän viestin lukemista ).

Mutta ohjausvirta näyttäisi suunnilleen tältä:

Ja koodi sen tekemiseen näyttäisi suunnilleen tältä :

$.get(acme_ajax_object.ajax_url, {

  action:   'get_data',
  security: acme_ajax_object.security

}, function(response) {

  // More to come...

});

Mutta se ei silti johda meitä siihen pisteeseen, että rakennetaan komponentti vastauksesta.

Työskentely Responsen kanssa

Tämä seuraava bitti on kaikki, miten päätät kirjoittaa JavaScriptin. En väitä, että tapa, jolla teen, on tapa tehdä se, mutta se on tapa tehdä se.

Joka tapauksessa tässä viestissä oletetaan, että saamme joitain tietoja takaisin API:lta ja että meillä on taatusti ne (tämä estää meitä kirjoittamasta suojalausekkeita).

Lisäksi sen avulla voimme täyttää tarvittavat muuttujat komponenttimme rakentamiseksi. Näin ollen pidän koodin mahdollisimman ohuena.

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

});

Tästä eteenpäin voimme nyt määrittää menetelmän, joka luo komponentin ja palauttaa tuloksen, jonka avulla voimme liittää sen DOM:iin.

Laittamalla kaikki yhteen

Yllä olevan koodin perusteella pitäisi olla suhteellisen selvää, mitä sinun tulee tehdä komponentin luomiseksi.

Silti kaiken yhdistäminen on prosessi, joka vaatii seuraavaa:

1. pyynnön esittäminen,
2. lukea vastausta,
3. komponentin rakentaminen vastauksen perusteella

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

Yllä olevan koodin pitäisi olla itsestään selvä, mutta jos ei, se toimii seuraavasti :

1. Otetaan vastauksesta tietoja, kuten otsikko, kuvan URL-osoite ja kuvaus,
2. luoda elementtejä jokaisesta niistä,
3. lisäämällä ne div – elementtiin
4. div -elementin palauttaminen sen jälkeen, kun siihen on liitetty eri palaset.

Sieltä voit sitten ottaa elementin – komponentin – ja liittää sen säilöön (kuten koodissa aiemmin on esitetty) ja jatkaa sitten niin muiden vastauksen tietojen kanssa.

Käytätkö muita JavaScript-tekniikoita?

Kuten viestin alussa mainittiin, tämä on paljon työtä jQueryn suhteen DOM:iin lisättävän komponentin luomiseksi.

Yhdistä tämä reagoivaan luonteeseen (ei responsiivinen mobiilisuunnittelun kannalta, vaan näytön osien suhteen, jotka vastaavat esityskerroksen muutokseen), ja sinulla on melko hyvä syy käyttää erilaista tekniikkaa tehdäksesi jotain tällaista.

Mutta silti on niitä projekteja, jotka vaativat tiettyä pinoa, ja jos jQuery on osa tätä pinoa, tämä on yksi tapa edetä ja tehdä juuri niin.