{"id":229520,"date":"2022-11-17T11:46:00","date_gmt":"2022-11-17T08:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229520"},"modified":"2022-11-17T11:48:19","modified_gmt":"2022-11-17T08:48:19","slug":"skapa-jquery-komponenter-i-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skapa-jquery-komponenter-i-wordpress\/","title":{"rendered":"Skapa jQuery-komponenter i WordPress"},"content":{"rendered":"\n

Front-end-utvecklingen har tagit stora framsteg under de senaste \u00e5ren (och forts\u00e4tter att g\u00f6ra det) genom anv\u00e4ndning av CSS-f\u00f6rprocessorer<\/a> och olika JavaScript-baserade teknologier.<\/p>\n

Det fina \u00e4r att alla dessa fortfarande kan anv\u00e4ndas inom ramen f\u00f6r WordPress-utveckling; Men eftersom WordPress inneh\u00e5ller jQuery \u00e4r det inte ovanligt att forts\u00e4tta skriva jQuery-baserat JavaScript.<\/p>\n

Trots alla olika teknologier (som Angular<\/a>, Vue<\/a>, React<\/a>, etc.) anv\u00e4nder jag fortfarande jQuery<\/a> och ES6<\/a> mer \u00e4n andra bibliotek och verktyg.<\/p>\n

F\u00f6r enkla uppgifter \u00e4r det inga problem, men n\u00e4r man beh\u00f6ver bygga mer avancerade komponenter baserat p\u00e5 svaret fr\u00e5n ett API-anrop kan det vara lite tungt att anv\u00e4nda jQuery.<\/p>\n

Detta betyder inte att det inte kan anv\u00e4ndas \u2013 och jag ska g\u00e5 igenom hur man anv\u00e4nder det f\u00f6r att bygga komponenter momentant dynamiskt \u2013 men jag tror att det presenterar ett fall om n\u00e4r andra alternativ \u00e4r mer varierande.<\/p>\n

Men mer om det i slutet av inl\u00e4gget.<\/p>\n

Skapa jQuery-komponenter i WordPress<\/h2>\n

N\u00e4r jag h\u00e4nvisar till id\u00e9n om en komponent, t\u00e4nker jag p\u00e5 en kombination av element som samverkar f\u00f6r att skapa ett mer komplext element.<\/p>\n

L\u00e5t oss till exempel s\u00e4ga att du g\u00f6r ett API-anrop och sedan, med hj\u00e4lp av svaret, m\u00e5ste du skapa en komponent som best\u00e5r av andra element.<\/p>\n

Definiera och rita en komponent<\/h3>\n

S\u00e5 till att b\u00f6rja med tycker jag att det \u00e4r ett bra s\u00e4tt att definiera en komponent: Ett element som best\u00e5r av en kombination av element.<\/p>\n

Det \u00e4r \u00e5tminstone vad jag kommer att anv\u00e4nda f\u00f6r just detta inl\u00e4gg.<\/p>\n

D\u00e4refter, hur kan vi visualisera detta i termer innan vi kodifierar det? Kanske n\u00e5got s\u00e5nt h\u00e4r:<\/p>\n

\u00c5terigen, allt detta \u00e4r baserat p\u00e5 id\u00e9n att g\u00f6ra en API-f\u00f6rfr\u00e5gan och arbeta med data.<\/p>\n

Ringa API-anropet<\/h3>\n

Att g\u00f6ra ett API-anrop med hj\u00e4lp av WordPress API \u00e4r n\u00e5got som jag har tagit upp i n\u00e5gra inl\u00e4gg (och om du letar efter det s\u00e4kraste s\u00e4ttet att g\u00f6ra det, rekommenderar jag att du l\u00e4ser det h\u00e4r inl\u00e4gget<\/a> ).<\/p>\n

Men kontrollfl\u00f6det skulle se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n

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

Och koden f\u00f6r att g\u00f6ra det skulle se ut ungef\u00e4r s\u00e5 h\u00e4r<\/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
Men det leder faktiskt inte till att vi bygger komponenten fr\u00e5n svaret.<\/p>\n
Arbeta med Responsen<\/h3>\n
Den h\u00e4r n\u00e4sta biten \u00e4r hur du v\u00e4ljer att skriva ditt JavaScript. Jag p\u00e5st\u00e5r inte att s\u00e4ttet jag g\u00f6r \u00e4r s\u00e4ttet att g\u00f6ra det, men det \u00e4r ett s\u00e4tt att g\u00f6ra det.<\/p>\n
Hur som helst, f\u00f6r det h\u00e4r inl\u00e4gget antar vi att vi kommer att f\u00e5 tillbaka lite data fr\u00e5n API:t och att vi garanterat har det (detta hindrar oss fr\u00e5n att beh\u00f6va skriva skyddsklausuler).<\/p>\n
Vidare till\u00e5ter det oss att fylla i de n\u00f6dv\u00e4ndiga variablerna f\u00f6r att bygga v\u00e5r komponent. D\u00e4rf\u00f6r h\u00e5ller jag koden s\u00e5 mager som m\u00f6jligt<\/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
H\u00e4rifr\u00e5n kan vi nu st\u00e4lla in en metod som skapar en komponent och returnerar resultatet som g\u00f6r att vi kan l\u00e4gga till den till DOM.<\/p>\n
S\u00e4tta ihop allting<\/h3>\n
Baserat p\u00e5 koden ovan b\u00f6r det vara relativt tydligt vad du beh\u00f6ver g\u00f6ra f\u00f6r att skapa komponenten.<\/p>\n
\u00c4nd\u00e5 \u00e4r att s\u00e4tta ihop allt en process som kr\u00e4ver f\u00f6ljande:<\/p>\n
    \n
  1. g\u00f6ra beg\u00e4ran,<\/li>\n
  2. l\u00e4ser svaret,<\/li>\n
  3. bygga en komponent baserat p\u00e5 svaret<\/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
    Koden ovan b\u00f6r vara sj\u00e4lvf\u00f6rklarande, men om inte g\u00f6r den f\u00f6ljande<\/a> :<\/p>\n
      \n
    1. Ta information fr\u00e5n svaret som titel, bildadress och beskrivning,<\/li>\n
    2. skapa delar av var och en av dessa,<\/li>\n
    3. l\u00e4gga till dem i ett div-<\/strong> element<\/li>\n
    4. returnera div-<\/strong> elementet efter att de olika delarna har lagts till det.<\/li>\n<\/ol>\n
      D\u00e4rifr\u00e5n kan du sedan ta elementet \u2013 komponenten \u2013 och l\u00e4gga till det i en container (som visas tidigare i koden) och sedan forts\u00e4tta att g\u00f6ra det med resten av informationen fr\u00e5n svaret.<\/p>\n
      Anv\u00e4nder du annan JavaScript-teknik?<\/h2>\n
      Som n\u00e4mnts i b\u00f6rjan av inl\u00e4gget \u00e4r detta mycket arbete g\u00e4llande jQuery att skapa en komponent att l\u00e4gga till i DOM.<\/p>\n
      Kombinera detta med den lyh\u00f6rda naturen (inte lyh\u00f6rd n\u00e4r det g\u00e4ller mobildesign utan n\u00e4r det g\u00e4ller delar av en sk\u00e4rm som reagerar p\u00e5 f\u00f6r\u00e4ndringar i presentationslagret), och du har ett ganska bra argument f\u00f6r att anv\u00e4nda en annan teknik f\u00f6r att g\u00f6ra n\u00e5got liknande.<\/p>\n
      Men \u00e4nd\u00e5 finns det de projekt som kr\u00e4ver en viss stack, och om jQuery \u00e4r en del av den stacken, s\u00e5 \u00e4r detta ett s\u00e4tt att g\u00e5 vidare och g\u00f6ra just det.<\/p>\n
      Inspelningsk\u00e4lla:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      \u00c4ven om andra tekniker kan vara b\u00e4ttre l\u00e4mpade f\u00f6r detta, s\u00e5 h\u00e4r skapar du jQuery-komponenter i WordPress f\u00f6r anv\u00e4ndning n\u00e4r du arbetar med Ajax.<\/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":[848,734,922,724],"tags":[1173],"class_list":["post-229520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-javascript-9","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229520"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229520\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}