Os benefícios da modularização já foram amplamente estudados na Engenharia de Software, e não são o foco deste artigo. Nele explicarei apenas o que for relevante do ponto de vista da implementação. Caso esteja interessado, consulte também a documentação oficial (em inglês) sobre como implementar herança de views.
Todos os exemplos utilizados neste artigo foram retirados da documentação oficial (em inglês).
Mixins
Mixins são blocos reutilizáveis de código, permitindo uma melhor organização de nossas views.
Primeiramente, vejamos um exemplo simples, que ilustra a declaração e o uso de mixins.
O código Jade abaixo
|
1 2 3 4 5 6 7 8 9 |
//- Declaração mixin list ul li foo li bar li baz //- Uso +list +list |
gera o HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> |
Simples, não? O mixin list pode ser utilizado em qualquer arquivo .jade, desde que o arquivo de sua declaração seja devidamente incluído.
Passagem de parâmetros
Vejamos, agora, um exemplo um pouco mais útil, em que o mixin recebe parâmetros para gerar saídas customizadas.
|
1 2 3 4 5 6 |
mixin pet(name) li.pet= name ul +pet('cat') +pet('dog') +pet('pig') |
gera o HTML
|
1 2 3 4 5 |
<ul> <li class="pet">cat</li> <li class="pet">dog</li> <li class="pet">pig</li> </ul> |
Blocos
Além disso, mixins podem receber blocos como parâmetro, para produzirem parte da (ou toda a) saída.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
mixin article(title) .article .article-wrapper h1= title if block block else p No content provided +article('Hello world') +article('Hello world') p This is my p Amazing article |
gera o HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>No content provided</p> </div> </div> <div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>This is my</p> <p>Amazing article</p> </div> </div> |
Atributos Nomeados
Também é possível utilizar atributos nomeados, como mostra o exemplo abaixo.
|
1 2 3 4 5 |
mixin link(href, name) //- attributes == {class: "btn"} a(class!=attributes.class, href=href)= name +link('/foo', 'foo')(class="btn") |
produzindo o HTML
|
1 |
<a href="/foo" class="btn">foo</a> |
Por padrão, os atributos são escapados durante a chamada da função. Assim, eles devem ser utilizados no mixin em conjunto com o operador !, para evitar que sejam escapados duas vezes.
Número Deconhecido de Parâmetros
Por fim, ainda é possível utilizar mixins que recebam um número desconhecido de parâmetros.
O código Jade abaixo
|
1 2 3 4 5 6 |
mixin list(id, ...items) ul(id=id) each item in items li= item +list('my-list', 1, 2, 3, 4) |
produz o HTML
|
1 2 3 4 5 6 |
<ul id="my-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> |