{"id":2974,"date":"2014-11-11T08:49:31","date_gmt":"2014-11-11T11:49:31","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2974"},"modified":"2014-11-11T08:49:31","modified_gmt":"2014-11-11T11:49:31","slug":"explorando-o-composite-pattern-javascript","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/","title":{"rendered":"Explorando o Composite Pattern JavaScript"},"content":{"rendered":"
\"Imagem<\/a>
Imagem ilustrativa<\/figcaption><\/figure>\n

Design Patterns \u00e9 um assunto bem comum em todas as linguagens de programa\u00e7\u00e3o, e o mais importante quando se trata em manuten\u00e7\u00e3o de c\u00f3digo. Um pattern \u00e9 uma solu\u00e7\u00e3o reutiliz\u00e1vel que pode ser aplicada em um projeto de desenvolvimento de software. Hoje, vamos explorar o Composite pattern com implementa\u00e7\u00e3o JavaScript.<\/p>\n

O composite pattern diz que um grupo de objetos pode ser tratado da mesma maneira que um objeto individual desse grupo.<\/p>\n

Um uso bem comum de Composite Pattern que voc\u00ea provavelmente j\u00e1 tenha visto \u00e9 o sistema de diret\u00f3rios de um Sistema Operacional que utiliza estrutura de dados em \u00e1rvore (considere que temos uma pasta e dentro dessa pasta temos v\u00e1rias outras pastas, e que dentro de cada uma dessas outras pastas temos mais algumas pastas, e assim por diante).<\/p>\n

Nesse modelo, temos \u201cN\u201d objetos que possui \u201cN\u201d filhos que tamb\u00e9m pode ter mais \u201cN\u201d filhos. Entretanto, a quantidade de objetos n\u00e3o importa, porque a implementa\u00e7\u00e3o \u00e9 a mesma para todos eles. Ok? Vamos ver isso melhor na pr\u00e1tica.<\/p>\n

Exemplo: Construindo uma cidade com Composite Pattern<\/strong><\/p>\n

Vamos colocar a m\u00e3o na massa e criar nosso pr\u00f3prio exemplo modificando um pouco o modelo apresentado acima, mas ainda seguindo a estrutura em \u00e1rvore. No nosso exemplo vamos construir duas cidades que possuem bairros que, por sua vez, possuem algumas casas (lembre-se da estrutura em \u00e1rvore). Algo bem simples e que vai ficar parecido com isto:<\/p>\n

| cities
\n|
\n|\u2013 S\u00e3o Paulo\/
\n| |\u2013 Liberdade
\n| |\u2013 Casa 1
\n| |\u2013 Casa 2
\n| |\u2013 Ipiranga
\n| |\u2013 Casa 3
\n|
\n|\u2013 Rio de Janeiro\/
\n| |\u2013 Leblon
\n| |\u2013 Casa 4
\n| |\u2013 Lapa
\n| |\u2013 Casa 5
\n| |\u2013 Casa 6
\n|<\/p>\n

O objeto possuir\u00e1 os seguintes m\u00e9todos espec\u00edficos do nosso composite:<\/p>\n

add: adiciona um novo filho para o objeto;
\nremove: remove um determinado filho do objeto;
\ngetChild: retorna um filho do objeto;<\/p>\n

M\u00e9todo auxiliar:<\/strong><\/p>\n

getElement: retorna o elemento HTML do objeto espec\u00edfico;<\/p>\n

Criamos o objeto \u201cCidade\u201d que ter\u00e1 o formato composite:<\/strong><\/p>\n


<\/p>\n\n\n\n
1<\/code><\/td>\nvar City = function (title, id, className) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>this.children = [];<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>this.element = document.createElement('div');<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>var h2 = document.createElement('h2');<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>this.element.id = id;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>if (className) this.element.className = className;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
9<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>h2.textContent = title;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>this.element.appendChild(h2);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\nCity.prototype = {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>add: function (child) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>this.children.push(child);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>this.element.appendChild(child.getElement());<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>remove: function (child) {\u00a0\u00a0\u00a0 <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>for (var node, i = 0; node = this.getChild(i); i++) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>if (node == child) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>this.children.splice(i, 1);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>this.element.removeChild(child.getElement());<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return true;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
29<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return false;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
30<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
31<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
32<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>getChild: function (i) {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
33<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return this.children[i];<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
34<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>},<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
35<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
36<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>getElement: function () {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
37<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return this.element;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
38<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
39<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Instanciamos os objetos e montamos a estrutura<\/p>\n


<\/p>\n\n\n\n
1<\/code><\/td>\nvar<\/code> cities = <\/code>new<\/code> City(<\/code>''<\/code>, <\/code>'cities'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nvar<\/code> saoPaulo = <\/code>new<\/code> City(<\/code>'S\u00e3o Paulo'<\/code>, <\/code>'sao-paulo'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nvar<\/code> rioDeJaneiro = <\/code>new<\/code> City(<\/code>'Rio de Janeiro'<\/code>, <\/code>'rio-de-janeiro'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nvar<\/code> liberdade = <\/code>new<\/code> City(<\/code>'Liberdade'<\/code>, <\/code>'liberdade'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\nvar<\/code> ipiranga = <\/code>new<\/code> City(<\/code>'Ipiranga'<\/code>, <\/code>'ipiranga'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\nvar<\/code> lapa = <\/code>new<\/code> City(<\/code>'Lapa'<\/code>, <\/code>'lapa'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\nvar<\/code> leblon = <\/code>new<\/code> City(<\/code>'Leblon'<\/code>, <\/code>'leblon'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\nvar<\/code> casa1 = <\/code>new<\/code> City(<\/code>'Casa 1'<\/code>, <\/code>'casa-1'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
9<\/code><\/td>\nvar<\/code> casa2 = <\/code>new<\/code> City(<\/code>'Casa 2'<\/code>, <\/code>'casa-2'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\nvar<\/code> casa3 = <\/code>new<\/code> City(<\/code>'Casa 3'<\/code>, <\/code>'casa-3'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\nvar<\/code> casa4 = <\/code>new<\/code> City(<\/code>'Casa 4'<\/code>, <\/code>'casa-4'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\nvar<\/code> casa5 = <\/code>new<\/code> City(<\/code>'Casa 5'<\/code>, <\/code>'casa-5'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\nvar<\/code> casa6 = <\/code>new<\/code> City(<\/code>'Casa 6'<\/code>, <\/code>'casa-6'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\nvar<\/code> casaRemover7 = <\/code>new<\/code> City(<\/code>'Casa remover 7'<\/code>, <\/code>'casa-remover-7'<\/code>, <\/code>'composite-house'<\/code>);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\nliberdade.add(casa1);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\nliberdade.add(casa2);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\nipiranga.add(casa3);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\nipiranga.add(casaRemover7);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\nipiranga.remove(casaRemover7); <\/code>\/\/ Removido<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\nlapa.add(casa4);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\nleblon.add(casa5);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\nleblon.add(casa6);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
29<\/code><\/td>\nsaoPaulo.add(liberdade);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
30<\/code><\/td>\nsaoPaulo.add(ipiranga);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
31<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
32<\/code><\/td>\nrioDeJaneiro.add(lapa);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
33<\/code><\/td>\nrioDeJaneiro.add(leblon);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
34<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
35<\/code><\/td>\ncities.add(saoPaulo);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
36<\/code><\/td>\ncities.add(rioDeJaneiro);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
37<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
38<\/code><\/td>\ndocument.body.appendChild(cities.getElement());<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Se preferir, aqui est\u00e1 o demo<\/a> de como ficou o exemplo funcionando. Composite pattern \u00e9 interessante quando temos uma cole\u00e7\u00e3o de objetos que possuem o mesmo tratamento, \u00e9 um \u00f3timo pattern e bastante usado pelos desenvolvedores.<\/p>\n

Espero que tenham gostado. Qualquer d\u00favida, sugest\u00e3o ou cr\u00edtica, fique \u00e0 vontade para deixar seu coment\u00e1rio. At\u00e9 a pr\u00f3xima!<\/p>\n

—-<\/p>\n

Artigo de Pedro Ara\u00fajo, publicado no iMasters<\/a>.\t\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

\t\t\t\tDesign Patterns \u00e9 um assunto bem comum em todas as linguagens de programa\u00e7\u00e3o, e o mais importante quando se trata em manuten\u00e7\u00e3o de c\u00f3digo.\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[99,117,133,158],"yoast_head":"\nExplorando o Composite Pattern JavaScript - Blog DialHost<\/title>\n<meta name=\"description\" content=\"Design Patterns \u00e9 um assunto bem comum em todas as linguagens de programa\u00e7\u00e3o, e o mais importante quando se trata em manuten\u00e7\u00e3o de c\u00f3digo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Explorando o Composite Pattern JavaScript - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"Design Patterns \u00e9 um assunto bem comum em todas as linguagens de programa\u00e7\u00e3o, e o mais importante quando se trata em manuten\u00e7\u00e3o de c\u00f3digo.\" \/>\n<meta property=\"og:url\" content=\"\/blog\/explorando-o-composite-pattern-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog DialHost\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-11T11:49:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/04\/og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialhost\" \/>\n<meta name=\"twitter:site\" content=\"@dialhost\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\",\"name\":\"DialHost Internet\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\",\"https:\/\/twitter.com\/dialhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/03\/marca-dialhost.png\",\"width\":81,\"height\":81,\"caption\":\"DialHost Internet\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"name\":\"Blog DialHost\",\"description\":\"Os melhores conte\\u00fados sobre Desenvolvimento Web, Marketing e Neg\\u00f3cios\",\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.dialhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/\",\"name\":\"Explorando o Composite Pattern JavaScript - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#primaryimage\"},\"datePublished\":\"2014-11-11T11:49:31+00:00\",\"dateModified\":\"2014-11-11T11:49:31+00:00\",\"description\":\"Design Patterns \\u00e9 um assunto bem comum em todas as linguagens de programa\\u00e7\\u00e3o, e o mais importante quando se trata em manuten\\u00e7\\u00e3o de c\\u00f3digo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/\",\"url\":\"\/blog\/\",\"name\":\"In\\u00edcio\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/explorando-o-composite-pattern-javascript\/\",\"url\":\"\/blog\/explorando-o-composite-pattern-javascript\/\",\"name\":\"Explorando o Composite Pattern JavaScript\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Explorando o Composite Pattern JavaScript\",\"datePublished\":\"2014-11-11T11:49:31+00:00\",\"dateModified\":\"2014-11-11T11:49:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/explorando-o-composite-pattern-javascript\/#primaryimage\"},\"keywords\":\"feed de parceiros,html,javascript,noticias\",\"articleSection\":\"Dicas e Not\\u00edcias\",\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\",\"name\":\"DialHost Internet\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05feec2f99aef1c42b09aeaa637ee66f?s=96&r=g\",\"caption\":\"DialHost Internet\"},\"description\":\"H\\u00e1 mais de 18 anos proporcionando um servi\\u00e7o de hospedagem de sites voltado 100% na Experi\\u00eancia e Sucesso do Cliente, prezando a qualidade, transpar\\u00eancia e seguran\\u00e7a.\",\"sameAs\":[\"https:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/twitter.com\/dialhost\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2974"}],"collection":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2974"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2974\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2821"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}