Olá CAMAGADAS!
Iniciados em classes em javascript, gostaria de falar um pouco sobre as técnicas que utilizo para herdar classes e falar um pouco sobre dois métodos para implementar singletons.
Primeiro, a herança. Não quero esticar muito sobre esse assunto e imagino que saibam pelo menos para que serve isso. Se alguém não sabe, em algum daqueles links que passei no post anterior à esse deve ter. Senão aqui vai uma breve explicação:
A Herança é um princípio da Programação Orientada a Objetos que permite que as classes compartilhem atributos e operações baseados em um relacionamento, geralmente generalização. A herança permite a criação de subclasses que herdam alguns dos atributos e das operações (ou Métodos) da classe pai (super-classe ou classe base). A herança é um conceito aplicado no momento de criação das classes. Ela é usada na intenção de reaproveitar código ou comportamento generalizado ou especializar operações ou atributos.
fonte: Wikipédia
Herança
A idéia de Classe é gerar um template, um tipo de alguma coisa que queremos criar. A instância é nada mais que um objeto concretizado deste tipo. Vou utilizar um exemplo clássico e simples de se abstrair, vou tentar usar sempre os mesmos exemplos nos posts de Orientação à objetos em javascript.
Vamos criar um objeto Moto, e um objeto Carro. Os dois aceleram, fream e tem velocidade. Os dois fazem mais ou menos a mesma coisa, mas não são A MESMA COISA.
Podemos pensar que os dois são veículos. Então temos uma classe em comum, a classe Veiculo =).
var Veiculo = {
Class : function(){
var velocidade = 0
this.acelerar = function(){ velocidade += 10}
this.frear = function(){ velocidade -=10 }
this.velocidade = function(){ return velocidade }
}
}
Criamos então uma Classe em comum aos dois objetos, Moto e Carro. Como fazer a herança para os dois? Simples:
Moto:
var Motocicleta = {
Class : function(){
Veiculo.Class.apply(this)
}
}
Carro:
var Carro = {
Class : function(){
Veiculo.Class.apply(this)
}
}
var moto = new Motocicleta.Class() moto . acelerar() moto . velocidade() // 10
function Page(){
var width = 800;
this.getWidth = function(){
return width;
}
}
Page.instance = null;
Page.getInstance = function(){
if (Page.instance == null) Page.instance = new Page();
return Page.instance;
}
var Deus = {
Class : function(){
var self = this
Deus.getInstance = function(){ return self }
delete Deus.Class
},
getInstance : function(){ return new Deus.Class }
}
var Singleton = {}
var Projeto = {
version : '1.0',
sidebar : function(){},
util : {
Analitics : function(){}
}
}
Projeto.util.Analitics()
Mais: Milfont.org/tech – Herança no Javascript
Filed under: Boas práticas, Design Pattern, Javascript, OOP, Técnicas de programação | 4 Comments
E aí galera, como passaram o natal !?!?!
Espero que muito bem =)
Caros, eu gostaria de mostrar muitas coisas legais que podem ser feitas em js e algumas que inclusive já fiz. Porém é muito complicado mostrar sem que todos tenham em mente como funciona a programação orientada à objetos na linguagem Javascript.
Meu intuito nesse post é mostrar como eu ( Eduardo Ottaviani ) faço minhas classes pois uso uma forma diferente de criação de classes das formas convencionais.
O Javascript é uma linguagem muito peculiar, ela implementa tudo mas de formas diferentes e é uma linguagem muito dinâmica, muito flexível. Então você pode implementar as coisas de muitas formas diferentes. O Javascript inclusive nos incentiva a procurar soluções em outras linguagens. jQuery é uma implementação em OOP e usa conceitos de outras linguagens como perl e lisp.
Para quem deseja ser um excelente programador em Js eu recomendo fortemente que desenvolva alguma coisa em outras linguagens, porque têm suas peculiaridades e muitas implementações padrão das linguagens pode ser reproduzida no Js afim de se resolver um problema lógico ou apenas dar uma idéia de como montar um código que te pareça mais amigável sintáticamente.
Bom, além de js eu me aventurei um pouco em outras linguagens, como python, php, ruby e smalltalk. Algumas peculiariadades delas eu acabei incorporando no js.
Por exemplo, vocês já devem ter reparado que não uso ponto-e-vírgulas no meu código e uso o menos possível chaves para if´s que tenham apenas uma instrução e quando tem uma instrução do tipo função ou um operador. Essa sintaxe para mim é muito mais enxuta muito mais limpa e peguei de python.
“Mas CARAY o que isso tem haver com OOP!?!?!?!”
Calma fi..ochhh… to passando a vaselina pra ir com carinho.
Existem várias implementações de Classes em Js, e há muitas na internet, vou deixar no final do post alguns artigos sobre OOP que pesquisei durante meu percurso pela estrada nerd.
Mas o que eu não gosto delas é que usam um design que não me agrada, lembrando o design de objetos nativo da linguagem como o Date().
Esse design:
function Pessoa(nome, idade){
this.nome = nome
this.idade = idade
}
Eu particularmente acho horrível esse pattern. Não gosto mesmo. Parece que pessoa é uma função… não curto.
É aí que as linguagens Ruby e Smalltalk entram, elas me deram uma idéia para criar um design diferente.
No Smalltalk explicando bem por cima, bem grosseiramente, tudo é objeto e para criar uma classe você também usa um objeto. Portanto esse objeto cria uma Classe. Passando para o Js essa idéia, a classe Pessoa acima ficaria:
var Pessoa = {
Class : function(nome, idade){
this.nome = nome
this.idade = idade
}
}
Pronto! Olha lá, é um objeto que cria uma classe. Portanto Pessoa é um objeto onde tem um construtor para a classe do tipo Pessoa. Eu acho muito mais fácil para organizar o código e fica muito claro que aquilo não é uma função e sim uma classe, além de facilitar na hora de criar variáveis e métodos estáticos. Outra vantagem veremos mais pra frente num post futuro, quando precisamos usar composição ou agregação.
Beleza, mas uma coisa ainda não me agrada nessa classe, os atributos… Algumas raras vezes precisamos iterar pelos atributos de um objeto, mas essa tarefa se torna muito verbosa porque precisamos verificar se o atributo do objeto é uma variável ou um método, isso é meio chato além de prejudicar o processamento.
Então usamos um conceito de outra linguagem, Ruby. Não existem atributos na nossa classe, apenas métodos. Assim sabemos que seja lá o que for iterarmos não precisa haver verificação, tudo é método. Métodos podem fazer tudo o que atributos fazem, mas não o contrário, então podemos sempre implementar em forma de métodos.
var Pessoa = {
Class : function( nome, idade ){
this.nome = function(n){
return n ? nome = n : nome
}
this.idade = function(i){
return i ? idade = i : idade
}
}
}
Olha que belezinha… muito mais bonita a cara dessa classe, fala aí. Os métodos são setters e getters ao mesmo tempo, se passar um valor a função seta as variaveis privadas (nome, idade) que são criadas no momento da instância do objeto. Se não passar nenhum valor, ela retorna o valor das variáveis. Pra que ficar criando setNome, setIdade, getNome, getIdade ??? Não precisa disso…
Bom, pode ser que você não goste muito da sintaxe na hora de criar um objeto:
var Edu = new Pessoa.Class("Eduardo Ottaviani", 25)
Eu não tenho problema nenhum com a palavrinha “Class” ali. Mas pode ser que alguém sinta uma coceira por causa disso, principalmente se o nome da classe for muito maior que Pessoa.
Bom, utilizo nesse caso um método existente nas Classes em Ruby. O famoso “new”. No js a palavra new é reservada, mas podemos usá-la como usamos a palavra Class, com letra maiúscula. É só criar esse método estático na nossa Classe:
var Pessoa = {
New : function(nome, idade){ return new this.Class(nome, idade) },
Class : function( nome, idade ){
this.nome = function(n){
return n ? nome = n : nome
}
this.idade = function(i){
return i ? idade = i : idade
}
}
}
Olha o New ali, na primeira linha da nossa classe. O New é um método estático da Classe e retorna uma nova instância passando os parâmetros para o construtor real da classe.
Agora para os que não gostam de instanciar o objeto da forma Nome.Class :
var Edu = Pessoa.New("Eduardo Ottaviani", 25)
Que classe bonita fala sério…
Viram, com conceitos de outras linguagens mudamos a cara da nossa classe. Eu costumo chamar as características das linguagens de Languages Patterns. Por isso do título do post. Então, usamos alguns poucos Languagens Patterns para criar nosso próprio pattern de criação de Classes. Não só para o código ficar mais bonito e vistoso, mas para ficar mais intuitivo, mais na cara, mais semântico.
Mais pra frente falarei sobre composição, agregação, herança, polimorfismo e outras peculiaridades desse paradigma orientado a objetos.
É isso galera, desejo para vocês um ótimo ano novo, que o ano que vem seja de muita paz e alegria, sucesso e dinheiro para todos nós.
Vocês viram que meu blog tá nevando ? \o/ Achei mó legal isso … pena que só vai até dia 4. =/
Como o prometido, os links para estudos em JOOP:
Julio Greff – Javascript orientado á objetos parte 1
Prosa digital – UML e javascript – Capítulo 1
GOOGLE : Pra quem não conhece essa ferramenta
Filed under: Boas práticas, Design Pattern, Javascript, OOP, Técnicas de programação | 4 Comments
Closure em Javascript
E aí povo!
Depois de umas férias de nerdice, queria voltar a falar sobre algumas técnicas muito interessantes que mais uma vez a melhor linguagem existente no planeta implementa. Eu estava devendo uma, quando falei sobre Callbacks em Javascript, os Closures.
Eu gostaria de falar também sobre Currying, que também utiliza closure, mas ia ficar um post muito longo. Recomendo bastante a leitura desse tema no blog do Milfont, onde ele fala sobre Currying em Javascript e sobre como é utilizado em callbacks.
O que é ..
Em ciência da computação e na programação uma closure é uma função que referencia variáveis livres no contexto léxico. Uma closure ocorre normalmente quando uma função é declarada dentro do corpo de outra, e a função interior referencia variáveis locais da função exterior. Em tempo de execução, quando a função exterior é executada, então uma closure é formada, que consiste do código da função interior e referências para quaisquer variáveis no escopo da função exterior que a closure necessita.
Wikipédia: http://pt.wikipedia.org/wiki/Closure
O conceito de Closures foi desenvolvido e primeiramente implementado em Scheme, que é uma linguagem de programação de paradigma funcional.
Embora Javascript não seja essencialmente de paradigma funcional, ela permite usar algumas técnicas de programação funcional, Closure é uma delas.
Como funciona?
Bom, num post passado eu havia dito que os callbacks utilizavam closures, de fato, algumas implementações usam, como?
Olha esse caso:
function h(f){
setTimeout(function(){
f()
},2000)
}
Aqui, h recebe um argumento f, portanto f é uma variável livre no escopo de h, e portanto é vista no escopo da função setTimeout. Quando a setTimeout for executar a função f, ela vai saber exatamente quem é a função f, pois está “amarrada” a função h.
function h(f){setTimeout(function(){f()},2000) }
Vamos tornar mais claro essa noção de variáveis livres. Vou usar mais um argumento agora na função h.
function h(f, n){
setTimeout(function(){
f(n)
},2000)
}
E agora eu chamo ela passando uma função como argumento e um número como segundo argumento:
h(function(i){alert(i)}, 20)
Se tudo correr bem, vai dar um alert de 20. Essa função não tem utilidade alguma, serve apenas para ilustrar como ocorre o closure.
Vamos para um exemplo um pouco mais complexo, pois usaremos o retorno de função. Eu considero a programação funcional em js complexa, levando em conta o início do meu aprendizado nessa técnica. Lógico que agora é muito mais simples e claro, mas quando comecei a aprender sobre isso eu pastei. Mas eu me considero meio burrinho, tenho certeza que você vai pegar o jeito da coisa bem mais rápido, se já não souber…
Vou criar uma função que soma os valores de um array e dentro dessa função vou construir outra função anônima que será retornada.
A idéia é , chamar uma função passando um array como argumento e receber uma outra função que fará a soma dos valores do array por um número, passado como argumento da chamada dessa função retornada.
“Caraaaaaay, que porra é essa?!?!?!?” . Tenha calma, fica mais fácil mostrar do que explicar:
function sumArr(arr){
return function(by){
for(var x = 0; x<arr.length; x++)
arr[x] = arr[x] + by
return arr
}
}
Portanto:
var somamais = sumArr([1,2,3])
somamais agora é uma função, que ainda enxerga as variáveis livres de “sumArr”. Então:
somamais(5)
>>[6, 7, 8]
Senhoras e senhores, temos o closure ali!!! A função sumArr é tal que possui uma variável de nome “arr” atrelada à uma outra função declarada internamente. Neste nosso caso, uma função anônima retornada após a chamada de “sumArr”.
Não é sensacional !?!??!
Não é maravilhoso !?!?!?!
Não é melhor que sexo ?!?!?!? ( tá bom…não… ¬¬)
Não é tudo, mas é muito interessante.
Trazendo um pouco para a vida real. Digamos que queremos fazer uma Library, uma biblioteca que use paradigma funcional em javascript para tratar Arrays.
function Library(arg1){
return function(action){
return ({
'?' : function(arg2){
for(var x = 0; x<arg2.length; x++)
if(arg2[x] == arg1) return true
return false
}
})[action]
}
}
Library.begin= function(){return Library}
Bom, o funcionamento desse código eu vou deixar para que você sozinho entenda. Mas, usei closure até não poder mais aí.
Nessa minha Mini-Library, eu só tenho uma funçãozinha de teste, que verifica se um valor existe em um array, retorna um valor booleano, assim:
Library.begin()
(4)('?')([4, 50, 39, 55, 79])
Responde true, já que o 4 está no array passado como argumento.
Programação funcional tende a ser bastante complicado para se entender, aliás, é esse um dos contras das linguagens de paradigma funcional como Scheme. É muito interessante, em alguns casos bem elegante, mas o código se torna muito confuso a medida que vai aumentando sua complexidade.
Sacaram a melosquência ?
Flw galera, aqueleabraço.
Filed under: Javascript, Técnicas de programação | 3 Comments
Filtro Solar – por Pedro Bial
A maioria dos meus posts são bem técnicos, mas chega uma hora que cansa né?
Ser nerd toda hora cansa…
Então, eu não gosto só de códigos bem feitos, gosto de textos bem feitos, curto bastante citações, pensamentos bem redigidos e lembro até hoje de um vídeo que meu professor de Física (Aldo, Universitário) do cursinho nos mostrou para passar uma mensagem para a turma.
Se você já conhece, veja de novo prestando atenção na letra, se você não conhece, recomendo que veja.
Um grande abraço.
Nunca deixem de usar filtro solar!
Se eu pudesse dar uma só dica sobre o futuro,seria esta: use filtro solar.Os benefícios a longo prazo do uso de filtro solar
estão provados e comprovados pela ciência;
já o resto de meus conselhos não tem outra base confiável além de minha própria experiência errante.Mas agora eu vou compartilhar esses conselhos com vocês.
Aproveite bem, o máximo que puder, o poder e a beleza da juventude.
Ou, então, esquece… Você nunca vai entender mesmo o poder
e a beleza da juventude até que tenham se apagado.
Mas, pode crer, daqui a vinte anos, você vai evocar as suas fotos e
perceber de um jeito – que você nem desconfia hoje em dia
quantas tantas alternativas se lhe escancaravam à sua frente,
e como você realmente tava com tudo em cima.
Você não é tão gordo(a) quanto pensa!Não se preocupe com o futuro.
Ou então preocupe-se, se quiser, mas saiba que pré-ocupação
é tão eficaz quanto mascar chiclete
para tentar resolver uma equação de álgebra.
As encrencas de verdade de sua vida tendem a vir de coisas que nunca
passaram pela sua cabeça preocupada, e te pegam no ponto fraco às quatro
da tarde de uma terça-feira modorrenta.
Todo dia enfrente pelo menos uma coisa que te meta medo de verdade.
Cante.Não seja leviano com o coração dos outros.
Não ature gente de coração leviano.
Use fio dental.
Não perca tempo com inveja.
Às vezes se está por cima,
às vezes por baixo.
A peleja é longa e, no fim,
é só você contra você mesmo.
Não esqueça os elogios que receber.
Esqueça as ofensas.
Se conseguir isso, me ensine.
Guarde as antigas cartas de amor.
Jogue fora os extratos bancários velhos.
Estique-se.Não se sinta culpado por não saber o que fazer da vida.
As pessoas mais interessantes que eu conheço não sabiam,
aos vinte e dois, o que queriam fazer da vida.
Alguns dos quarentões mais interessantes que conheço ainda não sabem.
Tome bastante cálcio.
Seja cuidadoso com os joelhos.
Você vai sentir falta deles.
Talvez você case, talvez não.
Talvez tenha filhos, talvez não.
Talvez se divorcie aos quarenta, talvez dance ciranda em suas bodas de diamante.
Faça o que fizer, não se auto-congratule demais, nem seja severo demais com você.
As suas escolhas tem sempre metade das chances de dar certo.
É assim pra todo mundo.Desfrute de seu corpo.
Use-o de toda maneira que puder. Mesmo.
Não tenha medo de seu corpo ou do que as outras pessoas possam achar dele.
É o mais incrível instrumento que você jamais vai possuir.
Dance.
Mesmo que não tenha aonde além de seu próprio quarto.
Leia as instruções, mesmo que não vá segui-las depois.
Não leia revistas de beleza. Elas só vão fazer você se achar feio.Dedique-se a conhecer os seus pais.
É impossível prever quando eles terão ido embora, de vez.
Seja legal com seus irmãos. Eles são a melhor ponte com o seu passado
e possivelmente quem vai sempre mesmo te apoiar no futuro.
Entenda que amigos vão e vem, mas nunca abra mão de uns poucos e bons.
Esforce-se de verdade para diminuir as distâncias geográficas
e de estilos de vida, porque quanto mais velho você ficar,
mais você vai precisar das pessoas que conheceu quando jovem.More uma vez em Nova York, mas vá embora antes de endurecer.
More uma vez no Havaí, mas se mande antes de amolecer.
Viaje.Aceite certas verdades inescapáveis:
Os preços vão subir. Os políticos vão saracotear.
Você, também, vai envelhecer.
E quando isso acontecer, você vai fantasiar que quando era jovem,
os preços eram razoáveis, os políticos eram decentes,
e as crianças, respeitavam os mais velhos.
Respeite os mais velhos.
E não espere que ninguém segure a sua barra.
Talvez você arrume uma boa aposentadoria privada.
Talvez case com um bom partido.
Mas não esqueça que um dos dois pode de repente acabar.Não mexa demais nos cabelos senão quando você chegar aos quarenta
vai aparentar oitenta e cinco.
Cuidado com os conselhos que comprar,
mas seja paciente com aqueles que os oferecem.
Conselho é uma forma de nostalgia.
Compartilhar conselhos é um jeito de pescar o passado do lixo, esfregá-lo,
repintar as partes feias e reciclar tudo por mais do que vale.Mas no filtro solar, acredite!
Filed under: Pensamentos | Leave a Comment
Css Orientado a Objetos
Css Orientado a Objetos?
E por que não ?
Eu sei, orientação à objetos é um paradigma de programação, sei também que Css não é uma linguagem de programação.
Mas nós podemos usar alguns conceitos desse paradigma tão usado e usá-lo ao nosso benefício, mesmo com uma linguagem de formatação.
A orientação à objetos nos ajuda a abstrair a complexidade de uma aplicação de forma coesa e organizada, usando conceitos
que temos em nossa mente para descrever de maneira bem clara o funcionamento de um conjunto ou sistema, de forma mais humana,
podemos modelar o código para atender aos requisitos necessários para seu funcionamento adequado.
A idéia de Orientação à Objetos é muito boa, o fato do Css não ter todos os requisitos para ser uma linguagem orientada à objetos,
não significa que não possamos usar alguns conceitos de Orientação à Objetos. Quais conceitos?
- Abstração
- Encapsulamento
- Classe
- Herança
- Reuso de código
Como utilizar estes conceitos voltados para o Css?
Abstração
Abstração não é um conceito exclusivo de OO, porém é um deles.
Antes de solucionar um problema, precisamos visualizá-lo em nossa mente e tentar simplificá-lo de forma bem primitiva a fim de
tornar sua solução fácil também, é aqui que tudo começa. Vamos então gerar um problema hipotético e conveniente:
Problema: Implementação de uma caixa com todas as bordas arredondadas .
Great! Temos um problema.
Existem várias formas de se resolver um problema, principalmente um problema clássico como este, mas visualizar o
problema e definir as principais propriedades da solução é a parte mais importante. A implementação da solução é pessoal, tendo seus prós e contras.
Deixa a abstração deste problema para depois.
Encapsulamento
No Css, podemos definir a formatação de um elemento de acordo com o seu elemento pai. Ex:
.caixa p{ border:1px solid red }
Com isso podemos “encapsular” estes comportamentos dentro de um elemento pai, ou seja, só seus filhos terão estes comportamentos.
Classe e Objetos
NOsso problema pede uma caixa com bordas arredondadas, certo?
Existem vários tipos de caixas, então podemos pensar que essa caixa é de um tipo, do tipo com bordas arredondadas.
Bom, estamos aqui usando o conceito de classe, dando um tipo para um elemento. Logo a instância ou o objeto deste tipo seria cada implementação do seu html =).
Lembra da abstração? Então, visualize tudo na sua cabeça a partir de agora.
A minha solução para as bordas arredondadas é a seguinte:
Usei uma caixa maior, dentro dela utilizei 3 retângulos de mesma largura da caixa maior porém com altura pequena, empilhados um em cima do outro.
Um dos retângulos é o “header” digamos assim. Ele abrigará duas outras caixas menores, uma flutuada à esquerda e outra à direita. Estas caixas menores serão responsáveis
por exibir as imagens de bordas arredondadas.
O segundo retângulo, é o do meio da pilha, ele abrigará de fato o conteúdo da caixa maior. Sua altura não é definida, ele cresce em altura de acordo com o tamanho do seu conteúdo.
Já o terceiro retângulo é uma réplica do “header” ele será um “footer” desta caixa e será exatamente igual ao primeiro retângulo.
A idéia é fazer com que o conteúdo do segundo retângulo empurre para baixo as bordas arredondadas inferiores, já que não sabemos qual será o tamanho da caixa em cada aplicação.
Ótimo, mas vamos ver um pouco de prática né ?
Ok, criei então um tipo para esta caixa, o tipo “rounded” ( Arredondado em inglês ), prefiri seu nome em inglês por ser menor.
Esta “Classe” ficou assim:
.rounded .r-header,
.rounded .r-footer,
.rounded .r-content,
.rounded .borders,
.rounded { display:block }
.rounded .r-header,
.rounded .r-footer{ background-repeat:repeat-x }
.rounded .borders{ line-height:0 }
.rounded .top-left,
.rounded .bottom-left{
float:left;
background:left no-repeat
}
.rounded .top-right,
.rounded .bottom-right{
float:right;
background:right no-repeat
}
Perceba que para esta solução, os dois retângulos que abrigam as imagens das bordas tem o mesmo comportamento, então otimizei ao máximo o Css para os comportamentos iguais.
A Classe “borders” se refere aos elementos de borda dentro dos retângulos, todos os 4 elementos de borda tem esta classe, e todos com comportamentos iguais.
Tudo foi definido apenas por classe, porque eu queria que não ficasse preso a apenas tipo de elemento html e para não ser necessário mexer no Css para funcionar com outros elementos.
Bom, então essa “Classe” seria nossa abstração para o tipo borda arredondada. Agora é onde chegamos na parte mais interessante sobre este post, onde utilizamos os dois últimos conceitos de OO, Reuso de código e Herança.
Já resolvemos o problema de bordas arredondadas, não precisamos resolvê-lo de novo, essa é uma das coisas interessantes quando pensamos em OO.
Eu queria fazer uma caixa com uma faixa cinza no topo e na parte inferior, que lembra uma janela do Mac. ( Eu disse “Lembra” )
Mas a janela do Mac é toda bonitinha, e tem os 4 cantos arredondados. Ótimo, então agora eu faço um objeto novo, ou melhor, uma classe nova, uma caixa arredondada do estilo Mac, ou seja, uma caixa do tipo arredondada do tipo mac.
Agora usamos o reuso de código, atráves de uma simples herança, usando a abstração da classe “rounded” com atributos encapsulados, para gerar uma nova caixa de novo tipo:
/*
* @author Eduardo Ottaviani
* @require {rounded.css}
*/
.macboxgray .r-header{ background-image:url(../../img/back-top.png) }
.macboxgray .top-right{ background-image:url(../../img/right-top.gif) }
.macboxgray .top-left{ background-image:url(../../img/left-top.gif) }
.macboxgray .r-footer{ background-image:url(../../img/back-bottom.png) }
.macboxgray .bottom-left{ background-image:url(../../img/left-bottom.gif) }
.macboxgray .bottom-right{ background-image:url(../../img/right-bottom.gif) }
.macboxgray .borders{
height:24px;
width:5px
}
.macboxgray .r-header,
.macboxgray .r-footer{ height:24px }
Da hora né? Olha quanta linha foi necessária para criar este novo objeto.
Você poderia estar se perguntando se não seria mais legível se eu nomeasse a classe assim:
.rounded.macboxgray
Seria, principalmente para ficar bem nítido e claro de quem a macboxgray herda, porém usar duas classes juntas não é uma boa idéia só por causa do ie6. Por que ?
Ao definir uma borda:
.rounded.macboxgray{ border:1px solid blue }
No iE6, outro objeto que tem apenas a classe “rounded” também herdaria a borda azul =/ . No mínimo esquisito….
Para que você entenda como foi feita a herança, vou mostrar o html desta caixa:
<form class="macboxgray rounded"> <span class="r-header"> <span class="borders top-left"></span> <span class="borders top-right"></span> </span> <fieldset class="r-content"> <p> lorem ipsum dolor amec lorem ipsum dolor amec lorem ipsum dolor amec lorem ipsum dolor amec </p> </fieldset> <span class="r-footer"> <span class="borders bottom-left"></span> <span class="borders bottom-right"></span> </span> </form>
Olha ali, o nosso objeto é um form, do tipo macboxgray rounded.
Portanto o macboxgray é uma derivação da classe rounded, uma implementação específica da classe “rounded”.
Conseguem entender o que estou querendo dizer?
Importando as duas classes, eu só precisaria mexer nas definições específicas para aquela tela que estou montando, dando margin, padding, float etc. Lembrando que nesta solução, eu teria de alterar o width na classe .macboxgray e alterar a altura no .macboxgray .r-content, já que o .r-content que detêm o conteúdo, poderia deixar um tamanho fixo por exemplo com scroll ou deixa-lo no padrão, em auto, crescendo conforme o conteúdo cresce.
Prestem atenção, embora eu tenha utilizado classes para os elementos html, neste post essas classes são implementadas conforme seu uso na linguagem Css reaproveitando comportamentos iguais, não são dessas classes que estou falando, estou falando da classe “Rounded”, uma classe que existe apenas na nossa cabeça, um tipo de objeto que é nossa solução para caixas arredondadas e que poderá ser estendido futuramente para outros tipos de caixa, também de bordas arredondadas.
Isso é um exemplo de como enxergar as coisas como objetos no Css. Um dia eu pensei nisso e acho que esta forma de pensar trás, além de reuso de código, visão simples e organizada do código Css, tornando muito mais estensível a linguagem do que já é, são inúmeras as possibilidades do que pode ser feito pensando dessa forma.
Pensa num objeto layout, que pode ser do tipo líquido ou fixo por exemplo, olha que coisa louca….pode viajar, foda né?
O Diego Eis mostrou no tableless.com.br uma implementação de layout líquido e com apenas uma alteração ele passava a ficar fixo. Olha aí uma idéia para uma outra classe…
Outra coisa boa é que, eu testei exaustivamente esta implementação de borda arredondada e funcionou muito bem, então, na hora de fazer um outro tipo de objeto que o estenda, perderei menos tempo com os bugs já resolvidos com esta implementação bem sucedida.
Quando criei o macboxgray, não precisei de novo me preocupar com os problemas das bordas arredondadas, elas já estavam solucionadas, precisei apenas pensar nos seus problemas pontuais.
Css não tem métodos, portanto, para sabermos da sua implementação na prática precisamos de uma documentação.
Este código acima html é colocado como exemplo dentro do comentário do rounded.css, para que um dia ao reutilizar o código, basta colar e será mais rápido de lembrar do seu funcionamento.
Então é muito importante uma mínima documentação, lá no código do macboxgray, deixei nos comentários que ele precisa da classe .rounded, na palavra-chave “required”. Lógico, não é necessário de novo colocar o exemplo do html dentro deste código, já que ele herda de rounded e já está lá seu exemplo.
Essa técnica particiona ao máximo o seu Css, aumentando consideravelmente o número de arquivos se você for uma pessoa criativa, então é interessante ser bem organizado na sua estrutura de pastas, até pensando em montar um próprio framework.
Terá casos onde será melhor você utilizar um único arquivo Css ao invés de ficar importando vários objetos de pequenos arquivos, consumindo a banda, então use o bom-senso para estes casos, copie os códigos e cole em um arquivo único, comprima-o se necessário, algumas linguagens server-side já fazem isso dependendo do framework que esteja usando, Rails faz isso. De qualquer forma no Css, desde que esteja bem encapsulado, juntar é muito mais fácil do que separar.
É claro que esta solução tem também suas desvantagens. Uma é que o código fica um pouco maior do que o necessário no html.
Mas pessoalmente acho um preço muito baixo a se pagar, se tiver a certeza de que funciona nos navegadores que deseja.
Eu usei aquela mesma solução de bordas arredondadas de um post meu, “Bordas Arredondadas”, lembra? Porém dei uma enxugada maior no código css e alterei algumas coisinhas.
That´s all folks! Espero que tenham entendido minha idéia e se alguém aí tiver mais idéias, por favor poste que eu quero saber!
Quem quiser ver como ficou a implementação das bordas clique aqui, visualize o código fonte para entender o que fiz.
Um grande abraço.
Filed under: Boas práticas, Css, Idéias, Técnicas de programação | Leave a Comment
Ajaxian- Rotating maps with CSS3 and jQuery fevereiro 9, 2010 Chris Heilmann
- Faye: Bayeaux protocol Comet server for Node.js fevereiro 9, 2010 Dion Almaer
- Think You Know Javascript? Try this Quiz! fevereiro 9, 2010 Michael Mahemoff
- Javascript ePub Readers fevereiro 9, 2010 Michael Mahemoff
- Pseudo 3D tricks from old computer games for all your Canvas needs fevereiro 8, 2010 Chris Heilmann
- Román Cortés and Ajaxian make up with amazing CSS demos fevereiro 8, 2010 Dion Almaer
- Mozilla Labs’ Weave can become a platform for us fevereiro 7, 2010 Dion Almaer
- AT AT Walking with CSS fevereiro 5, 2010 Dion Almaer
- jsContract: Design by Contract library fevereiro 4, 2010 Dion Almaer
- User scripts becoming more portable with Greasemonkey support in Chrome fevereiro 3, 2010 Dion Almaer
