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

Postado em fevereiro 18, 2007 às 18:35

Comentários

Este artigo ainda não possui nenhum comentário. Seja o primeiro a comentar!

Deixe seu comentário