{"id":17,"date":"2007-10-05T04:51:04","date_gmt":"2007-10-05T11:51:04","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2007\/10\/05\/bridge-para-encapsular-o-cross-browser\/"},"modified":"2007-10-05T04:51:04","modified_gmt":"2007-10-05T11:51:04","slug":"bridge-para-encapsular-o-cross-browser","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2007\/10\/05\/bridge-para-encapsular-o-cross-browser\/","title":{"rendered":"Bridge para encapsular o Cross Browser"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style17 () { return \"none\"; } function end17_ () { document.getElementById('wqd17').style.display = get_style17(); } <\/script>No rastro do meu <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/04\/deteccao-otimizada-com-javascript\/\">\u00faltimo post<\/a>, aproveitando a deixa de <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/04\/deteccao-otimizada-com-javascript\/\">detec\u00e7\u00e3o otimizada<\/a> trabalhando junto com o Design Pattern <a href=\"http:\/\/en.wikipedia.org\/wiki\/Bridge_pattern\">Bridge<\/a>,  aproveitaremos esse conceito para encapsularmos a complexidade de se trabalhar com c\u00f3digos que tenham que rodar em m\u00faltiplos Browsers.<\/p>\n<p>O padr\u00e3o Bridge define o desacoplamento da abstra\u00e7\u00e3o (interface) com suas implementa\u00e7\u00f5es e cada implementa\u00e7\u00e3o possa variar independentemente.<\/p>\n<p>No c\u00f3digo passado vimos isso implementado na fun\u00e7\u00e3o addEvent como segue:<\/p>\n<pre lang=\"javascript\">\r\nvar addEvent = function(el, type, fn) {\r\n    el['on'+type] = fn;\r\n};\r\nif(document.addEventListener) {\r\n    addEvent = function(el, type, fn) {\r\n        el.addEventListener(type, fn, false);\r\n    };\r\n} else if(document.attachEvent) {\r\n    addEvent = function(el, type, fn) {\r\n        el.attachEvent('on'+type, fn);\r\n    };\r\n}<\/pre>\n<p>Nesse c\u00f3digo o m\u00e9todo addEvent \u00e9 uma forma gen\u00e9rica de adicionar eventos a um elemento DOM na p\u00e1gina e encapsula o comportamento implementado pelos Browsers. Essa estrat\u00e9gia pode e deve ser adotada em todo o c\u00f3digo que necessite de implementa\u00e7\u00e3o diferente dependendo do navegador, o chamado Cross Browser.<\/p>\n<p>Cross Browser \u00e9 a t\u00e9cnica de implementar uma constru\u00e7\u00e3o que rode em m\u00faltiplos navegadores sem diferen\u00e7a percept\u00edvel ao usu\u00e1rio. O custo de aplicar essa t\u00e9cnica \u00e9 diminuir a performance da aplica\u00e7\u00e3o como um todo, aumentar a complexidade do c\u00f3digo mantido, propiciar um ambiente mais sujeito a falhas de implementa\u00e7\u00e3o e cair em bugs do pr\u00f3prio navegador (como o Memory-Leak no IE).<\/p>\n<p>Instanciar o objeto XMLHttpRequest \u00e9 outra situa\u00e7\u00e3o que possui diferen\u00e7a entre o l\u00edder de mercado e os demais navegadores. Aplicando essa t\u00e9cnica, far\u00edamos o seguinte c\u00f3digo:<\/p>\n<pre lang=\"javascript\">\r\nvar getXHR = function() {\r\n\tthis.http = new XMLHttpRequest;\r\n\treturn this.http;\r\n}\r\nvar isIE = !!document.attachEvent;\r\nif(isIE) {\r\n      var msxml = [\r\n        'MSXML2.XMLHTTP.3.0',\r\n        'MSXML2.XMLHTTP',\r\n        'Microsoft.XMLHTTP'\r\n      ];\r\n      for (var i=0, len = msxml.length; i &lt; len; ++i) {\r\n        try {\r\n          http = new ActiveXObject(msxml[i]);\r\n          \/\/cria nova implementa\u00e7\u00e3o\r\n          getXHR = function() {\r\n            return new ActiveXObject(msxml[i]);\r\n          };\r\n          break;\r\n        }\r\n        catch(e) {}\r\n      }\r\n};<\/pre>\n<p>Dei a dica no artigo passado de criar um arquivo para cada implementa\u00e7\u00e3o de navegador diferente e aplicar o conceito de Lazy Loading para carregar sob demanda.<\/p>\n<p id=\"wqd17\">Typically chemist&#8217;s shop can sale to you with discreet treatments for various heartiness problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>&#8220;. Maybe &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>&#8221; is a much complicated problem. Matters, like &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>&#8220;, are coupled numerous types of health problems. If you need to take prescription medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may switch on erectile disfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile malfunction drugs like Viagra without a formula is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end17_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No rastro do meu \u00faltimo post, aproveitando a deixa de detec\u00e7\u00e3o otimizada trabalhando junto com o Design Pattern Bridge, aproveitaremos esse conceito para encapsularmos a complexidade de se trabalhar com c\u00f3digos que tenham que rodar em m\u00faltiplos Browsers. O padr\u00e3o Bridge define o desacoplamento da abstra\u00e7\u00e3o (interface) com suas implementa\u00e7\u00f5es e cada implementa\u00e7\u00e3o possa variar [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,15,23,27],"tags":[],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/17"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}