Bridge para encapsular o Cross Browser

No rastro do meu último post, aproveitando a deixa de detecção otimizada trabalhando junto com o Design Pattern Bridge, aproveitaremos esse conceito para encapsularmos a complexidade de se trabalhar com códigos que tenham que rodar em múltiplos Browsers.

O padrão Bridge define o desacoplamento da abstração (interface) com suas implementações e cada implementação possa variar independentemente.

No código passado vimos isso implementado na função addEvent como 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);
    };
}

Nesse código o método addEvent é uma forma genérica de adicionar eventos a um elemento DOM na página e encapsula o comportamento implementado pelos Browsers. Essa estratégia pode e deve ser adotada em todo o código que necessite de implementação diferente dependendo do navegador, o chamado Cross Browser.

Cross Browser é a técnica de implementar uma construção que rode em múltiplos navegadores sem diferença perceptível ao usuário. O custo de aplicar essa técnica é diminuir a performance da aplicação como um todo, aumentar a complexidade do código mantido, propiciar um ambiente mais sujeito a falhas de implementação e cair em bugs do próprio navegador (como o Memory-Leak no IE).

Instanciar o objeto XMLHttpRequest é outra situação que possui diferença entre o líder de mercado e os demais navegadores. Aplicando essa técnica, faríamos o seguinte código:

var getXHR = function() {
	this.http = new XMLHttpRequest;
	return this.http;
}
var isIE = !!document.attachEvent;
if(isIE) {
      var msxml = [
        'MSXML2.XMLHTTP.3.0',
        'MSXML2.XMLHTTP',
        'Microsoft.XMLHTTP'
      ];
      for (var i=0, len = msxml.length; i < len; ++i) {
        try {
          http = new ActiveXObject(msxml[i]);
          //cria nova implementação
          getXHR = function() {
            return new ActiveXObject(msxml[i]);
          };
          break;
        }
        catch(e) {}
      }
};

Dei a dica no artigo passado de criar um arquivo para cada implementação de navegador diferente e aplicar o conceito de Lazy Loading para carregar sob demanda.

8 thoughts on “Bridge para encapsular o Cross Browser

  1. Rafael Ponte

    Opa! Excelente post :))

    Hoje com a gama de frameworks/APIs javascripts a preocupação com cross-browser recai bem menos aos desenvolvedores, sorte nossa! Contudo, ainda há várias “gambis” que somos forçados a implementar para que funcione em diveros browsers, rss

  2. cmilfont

    Sim, construir funções que encapsulem a diferença dos browsers é até melhor para sistemas mais complexos, que precisam fazer essas chamadas o tempo todo e a todo momento voce ter que verificar qual o browser.

  3. Pingback: Rafael via Rec6

  4. Pingback: Rafael Ponte » Blog Archive » Suavizando o load de páginas no Internet Explorer

  5. Pingback: Resumo javascript - Jan 2008 - CMilfont Tech

  6. Pingback: Capturando valores Css dos objetos. « Javiani

  7. Pingback: Especificação ou implementação? - CMilfont Tech

Comments are closed.