{"id":229527,"date":"2022-11-17T10:56:00","date_gmt":"2022-11-17T07:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229527"},"modified":"2022-11-17T10:58:26","modified_gmt":"2022-11-17T07:58:26","slug":"jquery-komponentide-loomine-wordpressis","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/jquery-komponentide-loomine-wordpressis\/","title":{"rendered":"JQuery komponentide loomine WordPressis"},"content":{"rendered":"\n

Esiotsa arendus on CSS-i eelprotsessorite<\/a> ja erinevate JavaScriptil p\u00f5hinevate tehnoloogiate kasutamise kaudu viimase paari aasta jooksul (ja teeb seda j\u00e4tkuvalt) suuri edusamme.<\/p>\n

Tore on see, et neid k\u00f5iki saab WordPressi arendamise kontekstis siiski kasutada; kuid kuna WordPress sisaldab jQueryt, pole haruldane j\u00e4tkata jQuery-p\u00f5hise JavaScripti kirjutamist.<\/p>\n

Vaatamata k\u00f5igile erinevatele tehnoloogiatele (nt Angular<\/a>, Vue<\/a>, React<\/a> jne), leian, et kasutan jQueryt<\/a> ja ES6<\/a> siiski rohkem kui teisi teeke ja t\u00f6\u00f6riistu.<\/p>\n

Lihtsate \u00fclesannete puhul pole see probleem, kuid kui on vaja n\u00e4iteks API-k\u00f5ne vastuse p\u00f5hjal luua t\u00e4psemaid komponente, v\u00f5ib jQuery kasutamine olla pisut raskem.<\/p>\n

See ei t\u00e4henda, et seda ei saaks kasutada \u2013 ja ma kirjeldan, kuidas seda kasutada komponentide hetkeliseks d\u00fcnaamiliseks koostamiseks \u2013, kuid ma arvan, et see n\u00e4itab, millal muud valikud on muutlikumad.<\/p>\n

Aga sellest pikemalt postituse l\u00f5pus.<\/p>\n

JQuery komponentide loomine WordPressis<\/h2>\n

Kui ma viitan komponendi ideele, pean ma silmas elementide kombinatsiooni, mis t\u00f6\u00f6tavad koos keerukama elemendi loomiseks.<\/p>\n

Oletame n\u00e4iteks, et teete API-k\u00f5ne ja seej\u00e4rel peate vastuse abil looma komponendi, mis koosneb muudest elementidest.<\/p>\n

Komponendi m\u00e4\u00e4ratlemine ja joonistamine<\/h3>\n

Alustuseks arvan, et see on hea viis komponendi m\u00e4\u00e4ratlemiseks: element, mis koosneb elementide kombinatsioonist.<\/p>\n

V\u00e4hemalt seda kavatsen ma selle postituse puhul kasutada.<\/p>\n

J\u00e4rgmiseks, kuidas saaksime seda enne kodifitseerimist visualiseerida? V\u00f5ib-olla midagi sellist:<\/p>\n

J\u00e4llegi, k\u00f5ik see p\u00f5hineb ideel teha API p\u00e4ring ja t\u00f6\u00f6tada andmete kallal.<\/p>\n

API-k\u00f5ne tegemine<\/h3>\n

API-k\u00f5ne tegemine WordPress API abil on midagi, mida olen k\u00e4sitlenud m\u00f5nes postituses (ja kui otsite selleks k\u00f5ige turvalisemat viisi, siis soovitan seda postitust<\/a> lugeda ).<\/p>\n

Kuid juhtimisvoog n\u00e4eks v\u00e4lja umbes selline:<\/p>\n

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

Ja selle toimimise kood n\u00e4eks v\u00e4lja umbes selline<\/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
Kuid see ei vii meid ikkagi selleni, et koostame vastuse p\u00f5hjal komponenti.<\/p>\n
Vastusega t\u00f6\u00f6tamine<\/h3>\n
See j\u00e4rgmine osa on k\u00f5ik, kuidas valite JavaScripti kirjutamise. Ma ei v\u00e4ida, et see, kuidas ma teen, on viis, kuidas seda teha, kuid see on viis seda teha.<\/p>\n
Igatahes eeldame selle postituse jaoks, et saame API-lt tagasi m\u00f5ned andmed ja et meil on need tagatud (see takistab meil kaitseklausleid kirjutamast).<\/p>\n
Lisaks v\u00f5imaldab see meil t\u00e4ita oma komponendi koostamiseks vajalikke muutujaid. Seega hoian koodi v\u00f5imalikult lahjana<\/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
Siit saame n\u00fc\u00fcd seadistada meetodi, mis loob komponendi ja tagastab tulemuse, mis v\u00f5imaldab meil selle DOM-i lisada.<\/p>\n
K\u00f5ike kokku panema<\/h3>\n
\u00dclaltoodud koodi p\u00f5hjal peaks olema suhteliselt selge, mida peate komponendi loomiseks tegema.<\/p>\n
Sellegipoolest on selle k\u00f5ige kokkupanek protsess, mis n\u00f5uab j\u00e4rgmist.<\/p>\n
    \n
  1. taotluse esitamine,<\/li>\n
  2. vastust lugedes,<\/li>\n
  3. vastuse p\u00f5hjal komponendi ehitamine<\/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
    \u00dclaltoodud kood peaks olema iseenesestm\u00f5istetav, kuid kui mitte, teeb see j\u00e4rgmist<\/a> :<\/p>\n
      \n
    1. V\u00f5ttes vastusest teavet, nagu pealkiri, pildi URL ja kirjeldus,<\/li>\n
    2. luues neist iga\u00fche elemente,<\/li>\n
    3. lisades need elemendile div<\/strong><\/li>\n
    4. elemendi div<\/strong> tagastamine p\u00e4rast erinevate osade lisamist.<\/li>\n<\/ol>\n
      Sealt saate seej\u00e4rel v\u00f5tta elemendi \u2013 komponendi \u2013 ja lisada selle konteinerisse (nagu koodis varem n\u00e4idatud) ja seej\u00e4rel j\u00e4tkata seda \u00fclej\u00e4\u00e4nud vastuse teabega.<\/p>\n
      Kas kasutate muid JavaScripti tehnoloogiaid?<\/h2>\n
      Nagu postituse alguses mainitud, on jQueryga palju t\u00f6\u00f6d, et luua DOM-ile lisatav komponent.<\/p>\n
      Kombineerige see tundliku olemusega (mitte tundlik mobiilse disaini osas, vaid kuvari osade osas, mis reageerivad esitluskihi muutustele) ja teil on \u00fcsna hea v\u00f5imalus kasutada midagi sellist teha teistsugust tehnoloogiat.<\/p>\n
      Kuid siiski on projekte, mis n\u00f5uavad teatud pinu, ja kui jQuery on selle virna osa, on see \u00fcks v\u00f5imalus edasi minna ja just seda teha.<\/p>\n
      :  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Kuigi teised tehnoloogiad v\u00f5ivad selleks paremini sobida, saate WordPressis Ajaxiga t\u00f6\u00f6tamiseks jQuery komponente luua j\u00e4rgmiselt.<\/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":[718,729,916,842],"tags":[1165],"class_list":["post-229527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-javascript-4","category-muud","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229527"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229527\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}