Estendendo Objetos DOM – Js Cross-Browser Parte 1

Esse artigo é o primeiro da série em que vou mosto as diferenças de interpretação de Js pelos browsers

Bom como disse, vou começar por um problema que o IE (Ahhh, o IE!) tem. Na hora de estender alguma Classe (String, Array etc.), essa Classe recebe os metodos que a adicionamos, e como qualquer instancia é automaticamente uma instancia de Object, na teoria estender Object resultaria extender todos os objetos inclusive os objetos DOM. Mas o IE claro tinha que atrapalhar, se você estendender o Object e testar o método adicionado por um objeto DOM (por exemplo via document.getEle…) simplesmente não funciona!

E agora como vamos fazer para aumentar as funcionalidades dos objetos? O certo é percorrer todos os objetos já no documento e adicionar o método desejado a cada um (simples ué). Agora já temos a lógica. Nosso código ficaria como abaixo:

[Obs] A Função "objDom" como já postado aqui, recebe o 1º parametro inicialmente com ID, se o 2º for declarado ("tag", "class" ou "id"), coloquei um comentário lá com o metodo convencional, futuramente não colocarei mais.

1 function extendDom(name, method)
2     {var objs=objDom("*","tag"); //document.getElementsByTagName("*")
3     for(var i=0; i<objs.length; i++)
4         {var obj=objs[i];
5         obj[name]=method;}}

Aonde "name" é o nome do método e "method" e a função. A chamada seria assim:

extendDom("fala", function(){alert("Um metodo!");})
document.getElementById("algum_elemento").fala() // Vai alertar escrito "Um metodo!"

Se fossemos executá-lo, obviamente teria que ser após a janela ser carregada (window.onload) para varrer todos os elementos. Se o de cima já basta a você, tudo bem, é só chamar em "window.onload". Mas e se criarmos um objeto dinamicamente, o que faríamos? Minha solução foi criar um Array global com os códigos para serem executados via evaluation (eval). Aí criei uma outra função que faz isso tudo junto:

1 bmr_extend_batch=new Array(); // Array Global
2 
3 function extendDomOnload(name, method)
4     {addEvent(window, "load", function(){extendDom(name, method);});
5     if(!bmr_extend_batch)
6         {bmr_extend_batch=new Array();}
7     bmr_extend_batch.push('extendDom("'+name+'", '+method+');');}

Na linha 4 "addEvent" é aquela função cross-browser para adicionar eventos. Pronto agora não precisamos nos preocupar em chamar a função após o carregamento e nem em aplica-la no onload. Agora para fazer as chamadas é simples:

extendDomOnload("fala", function(){alert("Um metodo!");})

E agora como fazemos para executar esse Array?

1 function executeBatchDom()
2     {for(var i=0; i<bmr_extend_batch.length; i++)
3         {var fnc=bmr_extend_batch[i];
4         eval(fnc);}}

Agora quando criar algum objeto é só chamar a função assim "executeBatchDom()", que varrera tudo e adicionará os métodos novamente, inclusive ao objeto recém-criado, mas atenção só chame a função quando colocar o objeto no documento, geralmente depois de "obj.appendChild(nobj)".

Resumindo

Criamos uma função que varre todos os elementos DOM do documento e adiciona o método. Criamos outra função para adicionar o método somente após o carregamento da janela, e que adiciona as chamadas em um Array global para que pudessemos rodar a 1ª função mesmo após o carregamento, como por exemplo criando um objeto. Criamos a última função que executa as chamadas contidas no Array, para que agora quando criarmos um objeto chamarmos ela no final, assim adiciona os metodos de novo. Tudo isso feito por causa do IE!

Por hoje é isso, se tem outro jeito mais elegante me avisem!

Anúncios

7 Responses to Estendendo Objetos DOM – Js Cross-Browser Parte 1

  1. JulioGreff disse:

    Wow!!! Parabéns, bela solução! Pena que não poderia ser automática, como dá errado no IE. Eu já tinha reportado o problema antes, mas não consegui nada parecido (nem de longe, não deu nada certo). Vlw cara!

  2. Opa!! Vlw Júlio, como sempre o IE :-/..

  3. […] 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 […]

  4. […] 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 […]

  5. eneasgesing disse:

    Hehe,

    Sempre tem um jeitinho brasileiro.

    Um abraço!

  6. […] 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 […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: