O que são "mixins"?
Vejo em alguns códigos JavaScript e gostaria de saber o que é; exemplos reais de uso.
O que são "mixins"?
Vejo em alguns códigos JavaScript e gostaria de saber o que é; exemplos reais de uso.
Mixin em JavaScript é um uma classe pensada com foco no DRY. Ela dá a habilidade do desenvolvedor pegar atalhos para resolver problemas, quase como os famosos "helpers", com a diferença de que um mixin pode ou não referenciar ou ser referenciado por um módulo1 sem a necessidade direta de extensão ou herança.
Botões (<button>
) e âncoras (<a>
) são conceitualmente componentes do DOM, o que significa que quando/se falarmos de "componentes", estamos indo na síntese do negócio; indo na camada mais genérica dos elementos que a nossa linguagem favorita de marcação trabalha.
Num todo, componentes são materiais renderizáveis; são itens que quando marcados no seu HTML têm a capacidade de se invocar para a visualização do usuário e materialização da interface.
Portanto, exemplifiquei mixin nesse cenário, através de JavaScript. Usando botões e âncoras ainda, desenvolvi os seguintes objetos:
var Button = {
design: {
colors: {
background: 'blue',
text: 'yellow'
},
borderRadius: 3,
padding: 5,
},
shape: function () {
return '<button style="background-color:' + this.design.colors.background + ';'
+ 'border-radius:' + this.design.borderRadius + 'px;'
+ 'padding:' + this.design.padding + 'px;'
+ 'color:' + this.design.colors.text + ';'
+ 'border: none;">'
+ this.getContent()
+ '</button>';
}
};
e
var Anchor = {
design: {
color: 'green',
underline: true
},
destination: 'google.com',
shape: function () {
return '<a style="color:' + this.design.color + ';'
+ 'text-decoration:' + (this.design.underline ? 'underline' : 'none') + ';" '
+ 'href="http://' + this.destination + '">'
+ this.getContent()
+ '</a>';
}
};
Eles possuem características em comum, certo? design
e shape
são exemplos. Entretanto, se você prestar atenção, são diferenciados pela sua implementação; pela suas características particulares. Em outras palavras, cada um desses "componentes" possui a sua própria personalidade, como a marcação em si, que no caso do botão é <button>
e no caso da âncora é <a>
.
Relembrando...
Lembra que há pouco falei sobre "renderização"? Pois é, componentes como esses devem ter a capacidade de se manifestarem no DOM. Então, faríamos para ensinar os dois objetos (Button
e Anchor
) a se projetarem sem cair na repetição de criar métodos iguais em seus escopos? Mixins!
Veja este terceiro objeto que desenhei:
var Component = {
render: function (platform) {
$(platform).html(this.shape());
},
append: function (platform) {
$(platform).append(this.shape());
},
setContent: function (content) {
this.content = content;
return this;
},
getContent: function () {
return this.content;
}
};
Ele, por sua vez, possui recursos que podem tornar os nossos botões e âncoras úteis – e podemos usar livremente clonando o seu escopo entre os nossos dois objetos.
Para a clonagem, por sua vez, utilizei o método extend()
do Underscore.js:
_.extend(Anchor, Component);
_.extend(Button, Component);
O resultado ficou simples. Para renderizarmos os nossos componentes, faríamos então o seguinte:
Button
.setContent('Register')
.append('body');
Anchor
.setContent('And here if you already have an account!')
.append('body');
Se juntarmos tudo, o resultado será este:
var Component = {
render: function (platform) {
$(platform).html(this.shape());
},
append: function (platform) {
$(platform).append(this.shape());
},
setContent: function (content) {
this.content = content;
return this;
},
getContent: function () {
return this.content;
}
};
var Button = {
design: {
colors: {
background: 'blue',
text: 'yellow'
},
borderRadius: 3,
padding: 5,
},
shape: function () {
return '<button style="background-color:' + this.design.colors.background + ';'
+ 'border-radius:' + this.design.borderRadius + 'px;'
+ 'padding:' + this.design.padding + 'px;'
+ 'color:' + this.design.colors.text + ';'
+ 'border: none;">'
+ this.getContent()
+ '</button>';
}
};
var Anchor = {
design: {
color: 'green',
underline: true
},
destination: 'google.com',
shape: function () {
return '<a style="color:' + this.design.color + ';'
+ 'text-decoration:' + (this.design.underline ? 'underline' : 'none') + ';" '
+ 'href="http://' + this.destination + '">'
+ this.getContent()
+ '</a>';
}
};
_.extend(Anchor, Component);
_.extend(Button, Component);
Button
.setContent('Register')
.append('body');
Anchor
.setContent('And here if you already have an account!')
.append('body');
Para brincar e praticar, aqui está o jsFiddle.
1: uma classe viva do seu aplicativo escrito em/com JavaScript;
Mixins é um termo bem comum em linguagens de programação orientada a objetos, no javascript a biblioteca MooTools sendo talvez a melhor referência.
A ideia base por detrás da criação e utilização de mixins é o conceito DRY que quer dizer "Dont Repeat Yourself" - "não se repita".
Um mixin é por exemplo um objeto onde define funções/métodos que podem depois ser importadas para outros objetos, namespaces ou classes. Se no seu código tiver alguns métodos que são precisos em partes de código diferentes pode defenir esses métodos num objeto à parte e importá-los/misturá-los (mixin) nos seus objetos. Assim quando precisar de corrigir esse bloco de código só tem de o fazer num sitio.
Aqui fica um exemplo do uso de Mixin nas Classes do MooTools: Fonte: Keetologi, Mark Keeto, um dos fundadores do MooTools
var Ringer = new Class({
sound: 'ring.ogg',
ring: function(sound){
sound = sound || this.sound;
new Sound(sound).play();
}
});
var Phone = new Class({
Implements: Ringer,
initialize: function(number){
this.number = number;
this.sound = 'phone.ogg';
},
call: function(from){
this.ring();
new Notification('Call from ' + this.from);
}
});
var AlarmClock = new Class({
Implements: Ringer,
initialize: function(alarmTime){
this.time = alarmTime;
this.sound = 'alarm.ogg';
},
alarm: function(time){
if (time == this.time) {
this.ring();
new Notification('Wake up sleepy head!');
}
}
});
Neste exemplo em cima, ambos a Classe "Phone" e "Alarm" têm código comum. A melhor solução, em vêz de colocar exatamente o mesmo código dentro de cada Classe, é fazer uma Classe à parte e depois importá-la para dentro das Classes em que ele é preciso. No MooTools este método de importar "Mixins" chama-se "Implement".