Estendendo Objetos DOM
Estender objetos DOM vem sendo um problema desde que IE é browser (ou quase isso, IE não é um browser, pode ser usado até como torradeira (?), mas browser não).
Como o bichinho azul não nos deixa estender Object ou Element (não me pergunte o porquê), nos vemos em um grande problema, que muitos desenvolvedores já tentaram resolver. Um dos mais bem-sucedidos nisso (dos que conheço) foi o Bermonruf, nesse post. Ele usa uma maneira criativa de estender os objetos DOM. Não tão eficiente quanto estender a raíz dos objetos (maldito IE!), mas funciona impressionantemente bem, devido as restrições a nós, pobres mortais, impostas. O post explica melhor a idéia do que eu.
Eu, perfeccionista não satisfeito, continuei atrás de uma maneira “elegante”, como diz o Bernardo. Não encontrei, mas encontrei uma maneira diferente, e que se aplica melhor ao meu estilo de desenvolvimento (me ajudou muito, não só com o DOM). Baseia-se em Extending DOM Nodes with Mootools, de Cory Hudson. Como não sou bom pra re-explicar soluções dos outros, leia lá.
Fuçando na Mootools
Como estou desenvolvendo uma biblioteca, não quero que seja necessário outras para fazê-la funcionar. Então fui fuçar na Mootools. Achei a “solução” para nosso “problema”. Vamos criar algumas funções daqui a pouco, baseadas em Object.extend, Element.extend e $. É tudo que iremos precisar para estender nossos objetos.
Utilizaremos a mesma idéia do Bernardo (estender objeto por objeto), mas de uma maneira diferente (apenas os elementos retornados pela função $ serão estendidos).
As Funções para Estender
As funções que apresentarei a vocês vêm diretamente da minha biblioteca. Elas tem algumas pequenas modificações que julguei necessárias, mas são praticamente a mesma coisa.
Object.extend = function(objDestination, objSource) { if(typeof objSource == "undefined") { objSource = objDestination; objDestination = this; } for(var property in objSource) objDestination[property] = objSource[property]; return objDestination;}Element.extend = function(objSource) { return Object.extend(Element.prototype, objSource);}
Antes de Element.extend, precisamos definir a função Element, também da minha biblioteca, também baseada na Mootools.
var Element = function(mElement) { if(typeof mElement == "string") mElement = document.createElement(mElement); return $(mElement);}
Quase tudo que precisamos está aí. Agora falta a função $, que retornará nossos objetos DOM já estendidos.
A função pra objeto e$tendido
Como já disse, apenas os objetos retornados por $ serão e$tendidos. Essa função retornará o objeto estendido com tudo que estiver no protótipo (prototype) da “classe” Element. Mais simples: todos os métodos da “classe” Element estarão em todos os objetos retornados por $. Como? Vamos codificar:
// Adaptado da Mootoolsvar $ = function(el) { el = document.getElementById(el); el.extend = Object.extend; el.extend(Element.prototype); return el;}
Pronto, aí está! That’s all folks! Peraí, ainda não. Não vão embora ainda, temos que estender Element ainda! Lembre-se, tudo que estiver em Element está nos objetos retornados em $.
Estendendo Element
Caramba, postagem concisa essa, não? Estende isso, aquilo… Vou deixar que o código abaixo se auto-explique:
Element.extend({ "metodo": function() { alert(this.innerHTML); }, "bold": function() { this.style.fontWeight = "bold"; }}
Estendemos (quase) tudo. Cada par desses aí resultará em um método (nesse caso, 2 pares, 2 métodos). Colocamos dois métodos no prototype de Element, e eles irão parar nos nossos objetos DOM.
Reaproveitando isso tudo
Um dos grandes méritos da POO é que podemos reutilizar tudo. Usando Object.extend, você pode estender qualquer objeto: strings, arrays, objetos DOM individuais, qualquer coisa. Basta chamar a função com dois argumentos: objDestination (objeto de destino) e objSource (métodos ou propriedades a serem adicionados, no formato JSON).
Espero que eu tenha sido claro, e utilizem bem!
Posts Relacionados
Comentários
Este artigo ainda não possui nenhum comentário. Seja o primeiro a comentar!






