Mais um artigo da série Tableless Weekly. Quero me desculpar por ter ficado algumas semanas sem escrever, mas creio que isto não se repetirá e estarei aqui com vocês todas as semanas. 🙂
Antes de ir aos links e tudo mais, quero discutir um assunto com vocês. No último artigo, falei sobre a nova especificação ECMAScript 6, que foi adotada parcialmente em alguns navegadores.
Uma das partes que ainda não foi adotada, é a nova especificação de orientação a objetos que a ES6 traz consigo. Vou dar alguns exemplos aqui e falar um pouco sobre este novo modelo de OO para que possamos discutir sobre o assunto. Não deixem de comentar 🙂
Uma das coisas mais interessantes, foi a questão das classes, que deixarão de ser “funções”.
Para quem se recorda, no modelo antigo, faríamos algo mais ou menos assim:
No novo modelo de OO será escrito da seguinte forma:
Outro aspecto interessante que foi a adoção de métodos construtores para a classe, o que torna nosso código padronizado e mais bem estruturado. Os construtores da ES6, são bem similares aos métodos construtores do PHP. No PHP usamos construtores através da palavra reservada __constructor(), e na ES6 usaremos a palavra reservada apenas como constructor().
Vamos recordar mais uma vez o modelo antigo e o novo modelo. Utilizaremos a mesma classe acima.
No novo modelo:
Mais um ponto que merece destaque é a construção de métodos de uma classe. Se tornou mais simples e objetiva. Continuando a mesma classe acima:
No novo Padrão seria:
Com apenas essas pequenas mudanças já podemos ter uma OO bem mais simples de entender que o modelo OO tradicional do JavaScript. Mas, e se eu disser que ainda tem mais?
No novo modelo de OO da ES6, podemos estender classes, assim como fazemos nas demais linguagens orientadas à objetos.
Imagine que tivéssemos propriedades no Camaro SS, que não são comuns ao Mustang GT. Poderíamos criar uma classe para cada um que tivesse suas propriedades e métodos próprios:
Veja que estendemos as classes para herdarmos as propriedades marca e modelo da classe pai para as classes filhas, e então criamos as propriedades distintas em cada uma das classes, como a propriedade música, que pertence somente ao Camaro, e a propriedade história, que pertence somente ao Mustang.
Bom, espero que tenham gostado da nova especificação de OO da ES6. Como todas as mudanças, tem seus prós e contras e quero que deixem suas opiniões à respeito nos comentários.
Sites Legais
Vamos aos sites legais desta edição.
The Building of Memories – Site feito pela Coca-Cola, para mostrar sua presença em alguns momentos marcantes na história. Achei bem legal o design flat e as animações do site.
DemiCreative – Site de uma agência de design e criação, muito interessante também.
Burnkit – Outra agência de design bem bacana.
Links Úteis
CSS3 Flags – Uma página feita pelo nosso amigo Raphael Fabeni, onde ele criou bandeiras de diversos países utilizando apenas CSS3. O mais bacana é que se você analisar o código, poderá aprender bastante as aplicações do CSS Animation.
Conclusão
Não quis ser muito extenso com os links neste artigo devido ao texto inicial ser bem grande, para não ficar cansativo.
Espero que tenham gostado e estarei de volta na próxima semana com mais um Tableless Weekly. Até a próxima.