{"id":230070,"date":"2022-11-17T11:43:00","date_gmt":"2022-11-17T08:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230070"},"modified":"2022-11-17T11:53:28","modified_gmt":"2022-11-17T08:53:28","slug":"criando-componentes-jquery-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criando-componentes-jquery-no-wordpress\/","title":{"rendered":"Criando componentes jQuery no WordPress"},"content":{"rendered":"\n

O desenvolvimento front-end deu grandes passos nos \u00faltimos dois anos (e continua a faz\u00ea-lo) atrav\u00e9s do uso de pr\u00e9-processadores CSS<\/a> e v\u00e1rias tecnologias baseadas em JavaScript.<\/p>\n

O bom \u00e9 que tudo isso ainda pode ser usado no contexto de desenvolvimento do WordPress; no entanto, como o WordPress inclui jQuery, n\u00e3o \u00e9 incomum continuar escrevendo JavaScript baseado em jQuery.<\/p>\n

Apesar de todas as v\u00e1rias tecnologias (como Angular<\/a>, Vue<\/a>, React<\/a>, etc.), ainda me vejo usando jQuery<\/a> e ES6<\/a> mais do que outras bibliotecas e ferramentas.<\/p>\n

Para tarefas simples, n\u00e3o \u00e9 um problema, mas quando precisar, digamos, construir componentes mais avan\u00e7ados com base na resposta de uma chamada de API, usar jQuery pode ser um pouco pesado.<\/p>\n

Isso n\u00e3o significa que ele n\u00e3o possa ser usado \u2013 e eu explicarei como us\u00e1-lo para construir componentes momentaneamente dinamicamente \u2013 mas acho que apresenta um caso de quando outras op\u00e7\u00f5es s\u00e3o mais vari\u00e1veis.<\/p>\n

Mas mais sobre isso no final do post.<\/p>\n

Criando componentes jQuery no WordPress<\/h2>\n

Sempre que me refiro \u00e0 ideia de um componente, estou pensando em uma combina\u00e7\u00e3o de elementos que trabalham juntos para criar um elemento mais complexo.<\/p>\n

Por exemplo, digamos que voc\u00ea fa\u00e7a uma chamada de API e, usando a resposta, precise criar um componente composto por outros elementos.<\/p>\n

Definindo e desenhando um componente<\/h3>\n

Ent\u00e3o, para come\u00e7ar, acho que \u00e9 uma boa maneira de definir um componente: Um elemento que \u00e9 composto de uma combina\u00e7\u00e3o de elementos.<\/p>\n

Pelo menos \u00e9 isso que vou usar para este post em particular.<\/p>\n

Em seguida, como podemos visualizar isso em termos antes de codific\u00e1-lo? Talvez algo assim:<\/p>\n

Novamente, tudo isso \u00e9 baseado na ideia de fazer uma solicita\u00e7\u00e3o de API e trabalhar nos dados.<\/p>\n

Fazendo a chamada da API<\/h3>\n

Fazer uma chamada de API usando a API do WordPress \u00e9 algo que abordei em alguns posts (e se voc\u00ea est\u00e1 procurando a maneira mais segura de fazer isso, recomendo a leitura deste post<\/a> ).<\/p>\n

Mas o fluxo de controle seria algo assim:<\/p>\n

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

E o c\u00f3digo para fazer isso seria algo assim<\/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
Mas isso ainda n\u00e3o nos leva ao ponto de construir o componente a partir da resposta.<\/p>\n
Trabalhando com a resposta<\/h3>\n
Este pr\u00f3ximo bit \u00e9 tudo como voc\u00ea opta por escrever seu JavaScript. N\u00e3o estou afirmando que a maneira como fa\u00e7o \u00e9 a maneira de faz\u00ea-lo, mas \u00e9 uma maneira de faz\u00ea-lo.<\/p>\n
De qualquer forma, para este post, assuma que vamos receber alguns dados de volta da API e que temos a garantia de t\u00ea-los (isso evita que tenhamos que escrever cl\u00e1usulas de guarda).<\/p>\n
Al\u00e9m disso, nos permite preencher as vari\u00e1veis \u200b\u200bnecess\u00e1rias para construir nosso componente. Assim, estou mantendo o c\u00f3digo o mais enxuto poss\u00edvel<\/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
A partir daqui, agora podemos configurar um m\u00e9todo que criar\u00e1 um componente e retornar\u00e1 o resultado que nos permitir\u00e1 anex\u00e1-lo ao DOM.<\/p>\n
Juntando tudo<\/h3>\n
Com base no c\u00f3digo acima, deve ficar relativamente claro o que voc\u00ea precisa fazer para criar o componente.<\/p>\n
Mesmo assim, juntar tudo \u00e9 um processo que requer o seguinte:<\/p>\n
    \n
  1. fazendo o pedido,<\/li>\n
  2. lendo a resposta,<\/li>\n
  3. construindo um componente com base na resposta<\/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
    O c\u00f3digo acima deve ser autoexplicativo, mas se n\u00e3o estiver fazendo o seguinte<\/a> :<\/p>\n
      \n
    1. Obtendo informa\u00e7\u00f5es da resposta, como t\u00edtulo, URL da imagem e descri\u00e7\u00e3o,<\/li>\n
    2. criando elementos de cada um deles,<\/li>\n
    3. anexando-os a um elemento div<\/strong><\/li>\n
    4. retornando o\u00a0 elemento div<\/strong> ap\u00f3s as v\u00e1rias partes terem sido anexadas a ele.<\/li>\n<\/ol>\n
      A partir da\u00ed, voc\u00ea pode pegar o elemento \u2013 o componente \u2013 e anex\u00e1-lo a um cont\u00eainer (como mostrado anteriormente no c\u00f3digo) e continuar fazendo isso com o restante das informa\u00e7\u00f5es da resposta.<\/p>\n
      Usando outras tecnologias JavaScript?<\/h2>\n
      Como mencionado no in\u00edcio do post, \u00e9 muito trabalho em rela\u00e7\u00e3o ao jQuery para criar um componente para adicionar ao DOM.<\/p>\n
      Combine isso com a natureza responsiva (n\u00e3o responsiva em termos de design m\u00f3vel, mas em termos de partes de uma tela que respondem a mudan\u00e7as na camada de apresenta\u00e7\u00e3o), e voc\u00ea tem um bom argumento para usar uma tecnologia diferente para fazer algo assim.<\/p>\n
      Mas ainda assim, existem aqueles projetos que exigem uma certa pilha, e se o jQuery fizer parte dessa pilha, ent\u00e3o essa \u00e9 uma maneira de seguir em frente e fazer exatamente isso.<\/p>\n
      Fonte de grava\u00e7\u00e3o:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Embora outras tecnologias possam ser mais adequadas para isso, veja como criar componentes jQuery no WordPress para uso ao trabalhar com 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":[722,733,920,846],"tags":[1170],"class_list":["post-230070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-javascript-8","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230070"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230070\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}