{"id":229982,"date":"2022-11-15T14:18:00","date_gmt":"2022-11-15T11:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229982"},"modified":"2022-11-15T14:18:18","modified_gmt":"2022-11-15T11:18:18","slug":"quando-a-funcao-clone-do-jquery-e-util","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/quando-a-funcao-clone-do-jquery-e-util\/","title":{"rendered":"Quando a fun\u00e7\u00e3o Clone do jQuery \u00e9 \u00fatil?"},"content":{"rendered":"\n<p>Um dos desafios de aprender uma biblioteca (seja a biblioteca padr\u00e3o de fun\u00e7\u00f5es que vem com uma linguagem de programa\u00e7\u00e3o ou um projeto de terceiros) \u00e9 duplo:<\/p>\n<ol>\n<li>aprender as fun\u00e7\u00f5es que est\u00e3o dispon\u00edveis,<\/li>\n<li>aprendendo a usar essas fun\u00e7\u00f5es.<\/li>\n<\/ol>\n<p>E, realmente, \u00e0s vezes at\u00e9 mesmo aprender a usar essas fun\u00e7\u00f5es n\u00e3o \u00e9 t\u00e3o dif\u00edcil \u2013 \u00e9 saber quando usar uma determinada fun\u00e7\u00e3o para ajudar a minimizar o c\u00f3digo enquanto ainda atinge os objetivos do projeto.<\/p>\n<h2>Fun\u00e7\u00e3o Clone do jQuery<\/h2>\n<p>Um exemplo que vem \u00e0 mente \u00e9 o uso da fun\u00e7\u00e3o <strong>clone<\/strong> do jQuery. <a href=\"https:\/\/api.jquery.com\/clone\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">A defini\u00e7\u00e3o<\/a> da fun\u00e7\u00e3o \u00e9 simples:<\/p>\n<blockquote>\n<p>O m\u00e9todo .clone() executa uma c\u00f3pia profunda do conjunto de elementos correspondentes, o que significa que ele copia os elementos correspondentes, bem como todos os seus elementos descendentes e n\u00f3s de texto.<\/p>\n<\/blockquote>\n<p>O bom da fun\u00e7\u00e3o \u00e9 que ela tamb\u00e9m pode criar uma c\u00f3pia &quot;superficial&quot; da fun\u00e7\u00e3o. Isso significa que voc\u00ea pode copiar os elementos sem os manipuladores de eventos, elementos filhos e assim por diante.<\/p>\n<p>Dependendo de suas necessidades, um vai ser mais valioso que o outro. Mas, para este post, suponha que uma c\u00f3pia profunda \u00e9 o que estamos procurando.<\/p>\n<h3>1 Um Caso de Uso Potencial<\/h3>\n<p>Digamos que voc\u00ea tenha um conjunto de imagens em uma p\u00e1gina e para cada uma dessas imagens, voc\u00ea precisa adicionar algum manipulador de eventos para que quando a imagem for clicada algo aconte\u00e7a.<\/p>\n<ul>\n<li>talvez uma caixa de di\u00e1logo modal apare\u00e7a,<\/li>\n<li>talvez algo seja enviado ao servidor por meio de uma solicita\u00e7\u00e3o ass\u00edncrona,<\/li>\n<li>talvez a apresenta\u00e7\u00e3o da p\u00e1gina precise mudar,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>N\u00e3o sei. Seja qual for o seu caso, digamos que voc\u00ea tenha uma imagem ou um conjunto de imagens e precise exibir uma caixa de di\u00e1logo modal quando for clicada.<\/p>\n<h3>2 Configurando o C\u00f3digo<\/h3>\n<p>Para fazer isso, h\u00e1 v\u00e1rias coisas que precisamos fazer:<\/p>\n<ol>\n<li>adicione um atributo personalizado \u00e0s imagens para que possamos anexar manipuladores de eventos adequados,<\/li>\n<li>configurar uma parcial que tenha a marca\u00e7\u00e3o que queremos exibir com um determinado peda\u00e7o de HTML,<\/li>\n<li>usando <strong>clone<\/strong> para aproveitar a parcial que escrevemos e duplicamos, conforme necess\u00e1rio.<\/li>\n<\/ol>\n<h4>Passo 1<\/h4>\n<p>Se voc\u00ea estiver trabalhando com o WordPress e procurando como adicionar atributos de imagem personalizados, voc\u00ea pode ver um tutorial de como fazer isso <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicionando-atributos-de-imagem-personalizados-do-wordpress\/\" title=\"neste post\">neste post<\/a>.<\/p>\n<h4>Passo 2<\/h4>\n<p>Criar uma parcial \u00e9 simples. O c\u00f3digo pode ser t\u00e3o simples quanto <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-00-sample-markup-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o seguinte trecho<\/a> :<\/p>\n<pre><code>&lt;p class=\"acme-element\"&gt;\n    &lt;span&gt;Acme&lt;\/span&gt;\n&lt;\/p&gt;&lt;!--- .acme-element --&gt;<\/code><\/pre>\n<p>E sim, voc\u00ea pode vestir um pouco de CSS e adicionar algum c\u00f3digo personalizado a um dos elementos usando PHP, mas isso cobre o b\u00e1sico absoluto.<\/p>\n<h4>etapa 3<\/h4>\n<p>Agora digamos que para cada imagem que existe na p\u00e1gina (com um atributo personalizado como <strong>data-type=&quot;acme&#8221;<\/strong> ), queremos anexar uma c\u00f3pia do elemento acima \u00e0 p\u00e1gina relacionada a cada uma das imagens na p\u00e1gina.<\/p>\n<p>Para isso, precisamos saber:<\/p>\n<ol>\n<li>quando um elemento \u00e9 clicado,<\/li>\n<li>\u00e9 o elemento pai,<\/li>\n<li>e como anexar o elemento usando o\u00a0 m\u00e9todo <strong>clone<\/strong>.<\/li>\n<\/ol>\n<p>Ent\u00e3o, primeiro, queremos detectar quando uma determinada imagem \u00e9 clicada. Para fazer isso, podemos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-01-loop-through-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">percorrer todas as imagens<\/a> na p\u00e1gina para que possamos anexar um manipulador de eventos personalizado:<\/p>\n<pre><code>\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  \/\/ ...\n\n});<\/code><\/pre>\n<p>Ent\u00e3o, quando a imagem \u00e9 clicada, encontramos o elemento pai da imagem que foi clicada (e ent\u00e3o a <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-02-find-parent-elements-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">maior parte do trabalho<\/a> acontece).<\/p>\n<p>Ou seja, pegamos uma c\u00f3pia do elemento anterior no post, clonamos e anexamos ao container:<\/p>\n<pre><code>var $this, $parent, $clone;\n\n\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  $this = $(this);\n  $(this).on('click', function() {\n\n    \/\/ Reference the parent of the image that was clicked and clone the element.\n    $parent = $this.parent();\n    $clone  = $('.acme-element').clone(true);\n\n    \/\/ Next, append the cloned element to the parent.\n    $parent.append($clone);\n\n  });\n});<\/code><\/pre>\n<p>E ent\u00e3o podemos trabalhar com cada um de forma independente.<\/p>\n<h2>Algumas pegadinhas<\/h2>\n<p>Ao clonar elementos, h\u00e1 algumas coisas que voc\u00ea precisa lembrar (que s\u00e3o mencionadas acima). Especificamente:<\/p>\n<ul>\n<li>lembre-se de que voc\u00ea pode precisar de elementos clonados de maneira diferente, dependendo do manipulador de eventos,<\/li>\n<li>pode ser necess\u00e1rio criar IDs personalizados para um determinado elemento antes de anex\u00e1-lo \u00e0 p\u00e1gina,<\/li>\n<li>talvez um elemento precise ser alternado quando algo for clicado,<\/li>\n<li>e assim por diante.<\/li>\n<\/ul>\n<p>Existem v\u00e1rias maneiras de lidar com um elemento clonado, mas sempre que voc\u00ea fizer isso, certifique-se de que, ao <strong>clonar<\/strong> um elemento, esteja identificando e gerenciando eventos adequadamente, para n\u00e3o obter resultados err\u00e1ticos.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um exemplo de caso de uso para quando a fun\u00e7\u00e3o clone do jQuery \u00e9 \u00fatil e como \u00e9 aplic\u00e1vel em uma situa\u00e7\u00e3o do mundo real com imagens, cont\u00eaineres, eventos e muito mais.<\/p>\n","protected":false},"author":1,"featured_media":165590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,733,846],"tags":[1170],"class_list":["post-229982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-javascript-8","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229982","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=229982"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/165590"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}