{"id":230080,"date":"2022-11-17T11:47:00","date_gmt":"2022-11-17T08:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230080"},"modified":"2022-11-17T11:48:33","modified_gmt":"2022-11-17T08:48:33","slug":"jquery-komponenttien-luominen-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/jquery-komponenttien-luominen-wordpressissae\/","title":{"rendered":"jQuery-komponenttien luominen WordPressiss\u00e4"},"content":{"rendered":"\n

Etup\u00e4\u00e4n kehitys on ottanut suuria harppauksia parin viime vuoden aikana (ja tekee niin edelleen) CSS-esiprosessorien<\/a> ja erilaisten JavaScript-pohjaisten tekniikoiden k\u00e4yt\u00f6n ansiosta.<\/p>\n

Hienoa on, ett\u00e4 kaikkia n\u00e4it\u00e4 voidaan edelleen k\u00e4ytt\u00e4\u00e4 WordPress-kehityksen yhteydess\u00e4; Koska WordPress kuitenkin sis\u00e4lt\u00e4\u00e4 jQueryn, ei ole harvinaista jatkaa jQuery-pohjaisen JavaScriptin kirjoittamista.<\/p>\n

Huolimatta kaikista erilaisista teknologioista (kuten Angular<\/a>, Vue<\/a>, React<\/a> jne.), huomaan silti k\u00e4ytt\u00e4v\u00e4ni jQuery\u00e4<\/a> ja ES6<\/a> :ta enemm\u00e4n kuin muita kirjastoja ja ty\u00f6kaluja.<\/p>\n

Yksinkertaisissa teht\u00e4viss\u00e4 se ei ole ongelma, mutta kun on esimerkiksi rakennettava edistyneempi\u00e4 komponentteja API-kutsun vastauksen perusteella, jQueryn k\u00e4ytt\u00f6 voi olla hieman raskasta.<\/p>\n

T\u00e4m\u00e4 ei tarkoita, ettei sit\u00e4 voisi k\u00e4ytt\u00e4\u00e4 \u2013 ja k\u00e4yn l\u00e4pi, kuinka sit\u00e4 k\u00e4ytet\u00e4\u00e4n komponenttien rakentamiseen hetkellisesti dynaamisesti \u2013 mutta mielest\u00e4ni se on esimerkki siit\u00e4, milloin muut vaihtoehdot ovat vaihtelevampia.<\/p>\n

Mutta siit\u00e4 lis\u00e4\u00e4 postauksen lopussa.<\/p>\n

jQuery-komponenttien luominen WordPressiss\u00e4<\/h2>\n

Aina kun viittaan komponentin ideaan, ajattelen elementtien yhdistelm\u00e4\u00e4, joka toimii yhdess\u00e4 luodakseen monimutkaisemman elementin.<\/p>\n

Oletetaan esimerkiksi, ett\u00e4 soitat API-kutsun ja sitten vastauksen avulla sinun on luotava komponentti, joka koostuu muista elementeist\u00e4.<\/p>\n

Komponentin m\u00e4\u00e4ritt\u00e4minen ja piirt\u00e4minen<\/h3>\n

Joten aluksi, mielest\u00e4ni t\u00e4m\u00e4 on hyv\u00e4 tapa m\u00e4\u00e4ritell\u00e4 komponentti: elementti, joka koostuu elementtien yhdistelm\u00e4st\u00e4.<\/p>\n

Ainakin sit\u00e4 aion k\u00e4ytt\u00e4\u00e4 t\u00e4ss\u00e4 postauksessa.<\/p>\n

Seuraavaksi, kuinka voisimme visualisoida t\u00e4m\u00e4n termein ennen sen kodifiointia? Ehk\u00e4 jotain t\u00e4m\u00e4n kaltaista:<\/p>\n

J\u00e4lleen kaikki t\u00e4m\u00e4 perustuu ajatukseen API-pyynn\u00f6n tekemisest\u00e4 ja tietojen k\u00e4sittelyst\u00e4.<\/p>\n

API-puhelun tekeminen<\/h3>\n

Olen k\u00e4sitellyt joissakin viesteiss\u00e4 API-kutsun soittamista WordPress-sovellusliittym\u00e4n avulla (ja jos etsit turvallisinta tapaa tehd\u00e4 se, suosittelen t\u00e4m\u00e4n viestin<\/a> lukemista ).<\/p>\n

Mutta ohjausvirta n\u00e4ytt\u00e4isi suunnilleen t\u00e4lt\u00e4:<\/p>\n

\"jQuery-komponenttien<\/a><\/p>\n

Ja koodi sen tekemiseen n\u00e4ytt\u00e4isi suunnilleen t\u00e4lt\u00e4<\/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
Mutta se ei silti johda meit\u00e4 siihen pisteeseen, ett\u00e4 rakennetaan komponentti vastauksesta.<\/p>\n
Ty\u00f6skentely Responsen kanssa<\/h3>\n
T\u00e4m\u00e4 seuraava bitti on kaikki, miten p\u00e4\u00e4t\u00e4t kirjoittaa JavaScriptin. En v\u00e4it\u00e4, ett\u00e4 tapa, jolla teen, on tapa tehd\u00e4 se, mutta se on tapa tehd\u00e4 se.<\/p>\n
Joka tapauksessa t\u00e4ss\u00e4 viestiss\u00e4 oletetaan, ett\u00e4 saamme joitain tietoja takaisin API:lta ja ett\u00e4 meill\u00e4 on taatusti ne (t\u00e4m\u00e4 est\u00e4\u00e4 meit\u00e4 kirjoittamasta suojalausekkeita).<\/p>\n
Lis\u00e4ksi sen avulla voimme t\u00e4ytt\u00e4\u00e4 tarvittavat muuttujat komponenttimme rakentamiseksi. N\u00e4in ollen pid\u00e4n koodin mahdollisimman ohuena<\/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
T\u00e4st\u00e4 eteenp\u00e4in voimme nyt m\u00e4\u00e4ritt\u00e4\u00e4 menetelm\u00e4n, joka luo komponentin ja palauttaa tuloksen, jonka avulla voimme liitt\u00e4\u00e4 sen DOM:iin.<\/p>\n
Laittamalla kaikki yhteen<\/h3>\n
Yll\u00e4 olevan koodin perusteella pit\u00e4isi olla suhteellisen selv\u00e4\u00e4, mit\u00e4 sinun tulee tehd\u00e4 komponentin luomiseksi.<\/p>\n
Silti kaiken yhdist\u00e4minen on prosessi, joka vaatii seuraavaa:<\/p>\n
    \n
  1. pyynn\u00f6n esitt\u00e4minen,<\/li>\n
  2. lukea vastausta,<\/li>\n
  3. komponentin rakentaminen vastauksen perusteella<\/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
    Yll\u00e4 olevan koodin pit\u00e4isi olla itsest\u00e4\u00e4n selv\u00e4, mutta jos ei, se toimii seuraavasti<\/a> :<\/p>\n
      \n
    1. Otetaan vastauksesta tietoja, kuten otsikko, kuvan URL-osoite ja kuvaus,<\/li>\n
    2. luoda elementtej\u00e4 jokaisesta niist\u00e4,<\/li>\n
    3. lis\u00e4\u00e4m\u00e4ll\u00e4 ne div<\/strong> – elementtiin<\/li>\n
    4. div<\/strong> -elementin palauttaminen sen j\u00e4lkeen, kun siihen on liitetty eri palaset.<\/li>\n<\/ol>\n
      Sielt\u00e4 voit sitten ottaa elementin \u2013 komponentin \u2013 ja liitt\u00e4\u00e4 sen s\u00e4il\u00f6\u00f6n (kuten koodissa aiemmin on esitetty) ja jatkaa sitten niin muiden vastauksen tietojen kanssa.<\/p>\n
      K\u00e4yt\u00e4tk\u00f6 muita JavaScript-tekniikoita?<\/h2>\n
      Kuten viestin alussa mainittiin, t\u00e4m\u00e4 on paljon ty\u00f6t\u00e4 jQueryn suhteen DOM:iin lis\u00e4tt\u00e4v\u00e4n komponentin luomiseksi.<\/p>\n
      Yhdist\u00e4 t\u00e4m\u00e4 reagoivaan luonteeseen (ei responsiivinen mobiilisuunnittelun kannalta, vaan n\u00e4yt\u00f6n osien suhteen, jotka vastaavat esityskerroksen muutokseen), ja sinulla on melko hyv\u00e4 syy k\u00e4ytt\u00e4\u00e4 erilaista tekniikkaa tehd\u00e4ksesi jotain t\u00e4llaista.<\/p>\n
      Mutta silti on niit\u00e4 projekteja, jotka vaativat tietty\u00e4 pinoa, ja jos jQuery on osa t\u00e4t\u00e4 pinoa, t\u00e4m\u00e4 on yksi tapa edet\u00e4 ja tehd\u00e4 juuri niin.<\/p>\n
      :  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Vaikka muut tekniikat saattavat soveltua t\u00e4h\u00e4n paremmin, n\u00e4in voit luoda jQuery-komponentteja WordPressiss\u00e4 k\u00e4ytett\u00e4v\u00e4ksi Ajaxin kanssa.<\/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":[730,719,917,843],"tags":[1166],"class_list":["post-230080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-kehittaejae","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230080"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230080\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}