Detecção otimizada com javascript

{ October 4th, 2007 }


cmilfont

Autor: cmilfont

Uma dica interessante para melhorar a otimização do seu código javascript é realizar a detecção no início da interpretação, para isso montar o código de encapsulamento de acordo com o Browser.

Geralmente quando queremos encapsular uma funcionalidade, por diferença de comportamento dos Browsers, testamos em qual Browser o código está sendo verificado e só então definimos o corpo do código. Algo como:

var addEvent = function(el, type, fn) {
    if(document.addEventListener) {
        el.addEventListener(type, fn, false);
    } else if(document.attachEvent) {
        el.attachEvent('on'+type, fn);
    } else {
        el['on'+type] = fn;
    }
}

Observe que sempre na chamada da function addEvent, testamos em qual Browser o código está sendo executado e então utilizamos a forma apropriada com a qual o Browser trabalha.

Imagine que esse tipo de construção, na medida que vai aumentando a complexidade da aplicação, onera a performance em geral, porque sempre terá que executar operações alheias ao objetivo do negócio, como detectar qual o Browser ou construir a function em tempo de execução.

Uma forma de evitar essa construção é uma estrutura como a que segue:

var addEvent = function(el, type, fn) {
    el['on'+type] = fn;
};
if(document.addEventListener) {
    addEvent = function(el, type, fn) {
        el.addEventListener(type, fn, false);
    };
} else if(document.attachEvent) {
    addEvent = function(el, type, fn) {
        el.attachEvent('on'+type, fn);
    };
}

Um código lido no início da interpretação que redefine o método de acordo com o Browser e deixa disponível para o restante da aplicação, sem a necessidade de testar novamente quando for acionada.

Uma forma interessante seria criar um arquivo “js” para cada implementação de Browser (como um para quem implementa o W3C e outro para o IE), detectar qual o Browser e acionar o arquivo em tempo de execução enquanto estão sendo carregados os recursos da página por exemplo.

Categories: Design Patterns, JavaScript, Melhores práticas ~ ~ Trackback


Assine os comentários deste artigo.


4 Responses to “Detecção otimizada com javascript”

  1. 1
    Rafael Ponte

    Bacana :)) Isso diminue as chances de memory-leak no IE.

    Problemas de cross-browser vão existir por muito tempo ainda, até lá nós desenvolvedores teremos que aprender e anotar dezenas de “hacks” para manter a compatibilidade entre os navegadores.

    Parabéns, excelente post, continue nos ensinando o caminho da pedras :)))

  2. 2
    Bridge para encapsular o Cross Browser - CMilfont Tech

    […] Eventos « Detecção otimizada com javascript […]

  3. 3
    Handerson Frota

    Boa gostei da idéia, bem interessante mesmo, vai da uma carga inicial mais com certeza vai somente na primeira vez.

    Parabêns

  4. 4
    Resumo javascript - Jan 2008 - CMilfont Tech

    […] http://www.milfont.org/tech/2007/10/04/deteccao-otimizada-com-javascript/ […]

Leave a Reply