Detecção otimizada com javascript

{ October 4th, 2007 }

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