{"id":229396,"date":"2022-11-17T11:43:00","date_gmt":"2022-11-17T08:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229396"},"modified":"2022-11-17T11:43:30","modified_gmt":"2022-11-17T08:43:30","slug":"tworzenie-komponentow-jquery-w-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/tworzenie-komponentow-jquery-w-wordpress\/","title":{"rendered":"Tworzenie komponent\u00f3w jQuery w WordPress"},"content":{"rendered":"\n

Rozw\u00f3j front-endu poczyni\u0142 wielkie post\u0119py w ci\u0105gu ostatnich kilku lat (i nadal to robi) dzi\u0119ki wykorzystaniu preprocesor\u00f3w CSS<\/a> i r\u00f3\u017cnych technologii opartych na JavaScript.<\/p>\n

Fajn\u0105 rzecz\u0105 jest to, \u017ce wszystkie z nich mog\u0105 by\u0107 nadal u\u017cywane w kontek\u015bcie rozwoju WordPress; jednak poniewa\u017c WordPress zawiera jQuery, nie jest niczym niezwyk\u0142ym kontynuowanie pisania JavaScript opartego na jQuery.<\/p>\n

Pomimo wszystkich r\u00f3\u017cnych technologii (takich jak Angular<\/a>, Vue<\/a>, React<\/a> itp.), nadal u\u017cywam jQuery<\/a> i ES6<\/a> cz\u0119\u015bciej ni\u017c innych bibliotek i narz\u0119dzi.<\/p>\n

W przypadku prostych zada\u0144 nie stanowi to problemu, ale gdy trzeba, powiedzmy, zbudowa\u0107 bardziej zaawansowane komponenty w oparciu o odpowied\u017a na wywo\u0142anie API, u\u017cycie jQuery mo\u017ce by\u0107 nieco trudne.<\/p>\n

Nie oznacza to, \u017ce nie mo\u017cna go u\u017cy\u0107 \u2013 i przejd\u0119 przez chwil\u0119, jak u\u017cywa\u0107 go do dynamicznego budowania komponent\u00f3w \u2013 ale my\u015bl\u0119, \u017ce przedstawia przypadek, w kt\u00f3rym inne opcje s\u0105 bardziej zmienne.<\/p>\n

Ale o tym na ko\u0144cu wpisu.<\/p>\n

Tworzenie komponent\u00f3w jQuery w WordPress<\/h2>\n

Ilekro\u0107 odnosz\u0119 si\u0119 do idei komponentu, my\u015bl\u0119 o kombinacji element\u00f3w, kt\u00f3re wsp\u00f3\u0142pracuj\u0105 ze sob\u0105, aby stworzy\u0107 bardziej z\u0142o\u017cony element.<\/p>\n

Za\u0142\u00f3\u017cmy na przyk\u0142ad, \u017ce wykonujesz wywo\u0142anie API, a nast\u0119pnie, korzystaj\u0105c z odpowiedzi, musisz utworzy\u0107 komponent, kt\u00f3ry sk\u0142ada si\u0119 z innych element\u00f3w.<\/p>\n

Definiowanie i rysowanie komponentu<\/h3>\n

Na pocz\u0105tek my\u015bl\u0119, \u017ce to dobry spos\u00f3b na zdefiniowanie komponentu: element, kt\u00f3ry sk\u0142ada si\u0119 z kombinacji element\u00f3w.<\/p>\n

Przynajmniej tego u\u017cyj\u0119 w tym konkretnym po\u015bcie.<\/p>\n

Nast\u0119pnie, jak mo\u017cemy to zwizualizowa\u0107 w kategoriach przed skodyfikowaniem? Mo\u017ce co\u015b takiego:<\/p>\n

Ponownie, wszystko to opiera si\u0119 na pomy\u015ble wykonania \u017c\u0105dania API i pracy na danych.<\/p>\n

Wykonywanie wywo\u0142ania API<\/h3>\n

Wykonywanie wywo\u0142ania API za pomoc\u0105 API WordPressa jest czym\u015b, co om\u00f3wi\u0142em w niekt\u00f3rych postach (a je\u015bli szukasz najbezpieczniejszego sposobu na zrobienie tego, polecam przeczyta\u0107 ten post<\/a> ).<\/p>\n

Ale przep\u0142yw kontroli wygl\u0105da\u0142by mniej wi\u0119cej tak:<\/p>\n

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

A kod do tego wygl\u0105da\u0142by mniej wi\u0119cej tak<\/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
Ale to nadal nie prowadzi nas do momentu zbudowania komponentu z odpowiedzi.<\/p>\n
Praca z odpowiedzi\u0105<\/h3>\n
Ten nast\u0119pny fragment to wszystko, w jaki spos\u00f3b zdecydujesz si\u0119 napisa\u0107 sw\u00f3j JavaScript. Nie twierdz\u0119, \u017ce spos\u00f3b, w jaki robi\u0119, jest sposobem na zrobienie tego, ale jest to spos\u00f3b na zrobienie tego.<\/p>\n
W ka\u017cdym razie w tym po\u015bcie za\u0142\u00f3\u017cmy, \u017ce otrzymamy pewne dane z powrotem z API i \u017ce mamy gwarancj\u0119 ich posiadania (to zapobiega nam konieczno\u015bci pisania klauzul ochronnych).<\/p>\n
Ponadto pozwala nam wype\u0142ni\u0107 niezb\u0119dne zmienne do zbudowania naszego komponentu. W ten spos\u00f3b staram si\u0119, aby kod by\u0142 mo\u017cliwie najszczuplejszy<\/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
St\u0105d mo\u017cemy teraz skonfigurowa\u0107 metod\u0119, kt\u00f3ra utworzy komponent i zwr\u00f3ci wynik, kt\u00f3ry pozwoli nam do\u0142\u0105czy\u0107 go do DOM.<\/p>\n
K\u0142ad\u0105c wszystko razem<\/h3>\n
Na podstawie powy\u017cszego kodu powinno by\u0107 stosunkowo jasne, co nale\u017cy zrobi\u0107, aby utworzy\u0107 komponent.<\/p>\n
Mimo to, po\u0142\u0105czenie tego wszystkiego w ca\u0142o\u015b\u0107 jest procesem, kt\u00f3ry wymaga:<\/p>\n
    \n
  1. z\u0142o\u017cenie wniosku,<\/li>\n
  2. czytanie odpowiedzi,<\/li>\n
  3. budowanie komponentu na podstawie odpowiedzi<\/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
    Powy\u017cszy kod powinien by\u0107 oczywisty, ale je\u015bli nie, robi to<\/a> :<\/p>\n
      \n
    1. Pobranie informacji z odpowiedzi, takich jak tytu\u0142, adres URL obrazu i opis,<\/li>\n
    2. tworzenie element\u00f3w ka\u017cdego z nich,<\/li>\n
    3. do\u0142\u0105czanie ich do elementu div<\/strong><\/li>\n
    4. zwracanie\u00a0 elementu div<\/strong> po do\u0142\u0105czeniu do niego r\u00f3\u017cnych element\u00f3w.<\/li>\n<\/ol>\n
      Stamt\u0105d mo\u017cesz pobra\u0107 element \u2013 \u200b\u200bkomponent \u2013 \u200b\u200bi do\u0142\u0105czy\u0107 go do kontenera (jak pokazano wcze\u015bniej w kodzie), a nast\u0119pnie kontynuowa\u0107 to z reszt\u0105 informacji z odpowiedzi.<\/p>\n
      Korzystasz z innych technologii JavaScript?<\/h2>\n
      Jak wspomnia\u0142em na pocz\u0105tku wpisu, jest to du\u017co pracy zwi\u0105zanej z jQuery, aby stworzy\u0107 komponent do dodania do DOM.<\/p>\n
      Po\u0142\u0105cz to z responsywnym charakterem (nie responsywnym pod wzgl\u0119dem projektowania mobilnego, ale pod wzgl\u0119dem cz\u0119\u015bci wy\u015bwietlacza reaguj\u0105cych na zmiany w warstwie prezentacji), a masz ca\u0142kiem niez\u0142y argument za u\u017cyciem innej technologii do zrobienia czego\u015b takiego.<\/p>\n
      Ale nadal istniej\u0105 projekty, kt\u00f3re b\u0119d\u0105 odwo\u0142ywa\u0107 si\u0119 do okre\u015blonego stosu, a je\u015bli jQuery jest cz\u0119\u015bci\u0105 tego stosu, to jest to jeden ze sposob\u00f3w na zrobienie tego.<\/p>\n
      \u0179r\u00f3d\u0142o nagrywania:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Chocia\u017c inne technologie mog\u0105 by\u0107 do tego lepiej dostosowane, oto jak tworzy\u0107 komponenty jQuery w WordPressie do u\u017cytku podczas pracy z Ajaxem.<\/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":[721,919,732,845],"tags":[1169],"class_list":["post-229396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-javascript-7","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229396"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}