Início » Explorando o Composite Pattern JavaScript
Design Patterns é um assunto bem comum em todas as linguagens de programação, e o mais importante quando se trata em manutenção de código.
Imagem ilustrativa
Design Patterns é um assunto bem comum em todas as linguagens de programação, e o mais importante quando se trata em manutenção de código. Um pattern é uma solução reutilizável que pode ser aplicada em um projeto de desenvolvimento de software. Hoje, vamos explorar o Composite pattern com implementação JavaScript.
O composite pattern diz que um grupo de objetos pode ser tratado da mesma maneira que um objeto individual desse grupo.
Um uso bem comum de Composite Pattern que você provavelmente já tenha visto é o sistema de diretórios de um Sistema Operacional que utiliza estrutura de dados em árvore (considere que temos uma pasta e dentro dessa pasta temos várias outras pastas, e que dentro de cada uma dessas outras pastas temos mais algumas pastas, e assim por diante).
Nesse modelo, temos “N” objetos que possui “N” filhos que também pode ter mais “N” filhos. Entretanto, a quantidade de objetos não importa, porque a implementação é a mesma para todos eles. Ok? Vamos ver isso melhor na prática.
Exemplo: Construindo uma cidade com Composite Pattern
Vamos colocar a mão na massa e criar nosso próprio exemplo modificando um pouco o modelo apresentado acima, mas ainda seguindo a estrutura em árvore. No nosso exemplo vamos construir duas cidades que possuem bairros que, por sua vez, possuem algumas casas (lembre-se da estrutura em árvore). Algo bem simples e que vai ficar parecido com isto:
| cities
|
|– São Paulo/
| |– Liberdade
| |– Casa 1
| |– Casa 2
| |– Ipiranga
| |– Casa 3
|
|– Rio de Janeiro/
| |– Leblon
| |– Casa 4
| |– Lapa
| |– Casa 5
| |– Casa 6
|
O objeto possuirá os seguintes métodos específicos do nosso composite:
add: adiciona um novo filho para o objeto;
remove: remove um determinado filho do objeto;
getChild: retorna um filho do objeto;
Método auxiliar:
getElement: retorna o elemento HTML do objeto específico;
Criamos o objeto “Cidade” que terá o formato composite:
1
var City = function (title, id, className) {
2
this.children = [];
3
this.element = document.createElement('div');
4
var h2 = document.createElement('h2');
5
6
this.element.id = id;
7
if (className) this.element.className = className;
8
9
h2.textContent = title;
10
this.element.appendChild(h2);
11
12
}
13
14
City.prototype = {
15
add: function (child) {
16
this.children.push(child);
17
this.element.appendChild(child.getElement());
18
},
19
20
remove: function (child) {
21
for (var node, i = 0; node = this.getChild(i); i++) {
22
if (node == child) {
23
this.children.splice(i, 1);
24
this.element.removeChild(child.getElement());
25
return true;
26
}
27
}
28
29
return false;
30
},
31
32
getChild: function (i) {
33
return this.children[i];
34
},
35
36
getElement: function () {
37
return this.element;
38
}
39
}
Instanciamos os objetos e montamos a estrutura
1
varcities = newCity('', 'cities');
2
varsaoPaulo = newCity('São Paulo', 'sao-paulo');
3
varrioDeJaneiro = newCity('Rio de Janeiro', 'rio-de-janeiro');
Se preferir, aqui está o demo de como ficou o exemplo funcionando. Composite pattern é interessante quando temos uma coleção de objetos que possuem o mesmo tratamento, é um ótimo pattern e bastante usado pelos desenvolvedores.
Espero que tenham gostado. Qualquer dúvida, sugestão ou crítica, fique à vontade para deixar seu comentário. Até a próxima!
Há mais de 18 anos proporcionando um serviço de hospedagem de sites voltado 100% na Experiência e Sucesso do Cliente, prezando a qualidade, transparência e segurança.
Sobre o autor:
DialHost Internet
Há mais de 18 anos proporcionando um serviço de hospedagem de sites voltado 100% na Experiência e Sucesso do Cliente, prezando a qualidade, transparência e segurança.
A partir de 1º de julho de 2022, o Google G Suite, a edição legada e gratuita do serviço Google Workspace, será extinguida. Se você utiliza o serviço, precisará fazer o upgrade de conta para o Workspace para não perder o seu acesso e a sua conta
Antes de começar a escrever sobre os melhores Plugins no Google Chrome para aumentar sua produtividade, preciso começar essa publicação com uma definição muito importante
