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
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:


1var 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
14City.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


1var cities = new City('', 'cities');
2var saoPaulo = new City('São Paulo', 'sao-paulo');
3var rioDeJaneiro = new City('Rio de Janeiro', 'rio-de-janeiro');
4var liberdade = new City('Liberdade', 'liberdade');
5var ipiranga = new City('Ipiranga', 'ipiranga');
6var lapa = new City('Lapa', 'lapa');
7var leblon = new City('Leblon', 'leblon');
8var casa1 = new City('Casa 1', 'casa-1', 'composite-house');
9var casa2 = new City('Casa 2', 'casa-2', 'composite-house');
10var casa3 = new City('Casa 3', 'casa-3', 'composite-house');
11var casa4 = new City('Casa 4', 'casa-4', 'composite-house');
12var casa5 = new City('Casa 5', 'casa-5', 'composite-house');
13var casa6 = new City('Casa 6', 'casa-6', 'composite-house');
14var casaRemover7 = new City('Casa remover 7', 'casa-remover-7', 'composite-house');
15
16liberdade.add(casa1);
17liberdade.add(casa2);
18
19ipiranga.add(casa3);
20ipiranga.add(casaRemover7);
21
22ipiranga.remove(casaRemover7); // Removido
23
24lapa.add(casa4);
25
26leblon.add(casa5);
27leblon.add(casa6);
28
29saoPaulo.add(liberdade);
30saoPaulo.add(ipiranga);
31
32rioDeJaneiro.add(lapa);
33rioDeJaneiro.add(leblon);
34
35cities.add(saoPaulo);
36cities.add(rioDeJaneiro);
37
38document.body.appendChild(cities.getElement());

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!

—-

Artigo de Pedro Araújo, publicado no iMasters.

Compartilhe:

Sobre o autor:

Sobre o autor:

Posts Relacionados:

Loja Virtual para iniciantes

Encontrar a melhor plataforma para construir sua primeira Loja Virtual é uma tarefa que exige uma pesquisa sobre soluções. Nesse artigo você confere soluções de baixo valor de investimento e facilidade de configuração.

Novidades do Blog

Deixe seu e-mail abaixo para passar a receber promoções e novidades do nosso Blog.