MDM Studio | Responsive Design
Compartilhe esta notícia no Facebook

Métodos nativos do Javascript equivalentes a jQuery - Parte 2

Segunda parte do artigo (traduzida e adaptada de sitePoint.com) que comenta sobre funções nativas, mais simples e equivalentes a outras da biblioteca jQuery

Carregando scripts após o carregamento da página

Num passado obscuro e distante os desenvolvedores colocariam scripts no HEAD do html e usariam a função window.onload = start; para lançar alguma função no carregamento da página. Isso funcionava (e funciona) mas window.onload só dispara a função depois que todos os arquivos incorporados à página (como imagens) são carregados completamente. Isso faz com que você espere algum tempo até que o código rode.


jQuery fornece um médoto muito mais eficiente:

$(start)
A função start() é executada logo após o arquivo html ter sido carregado e o DOM estiver pronto, mas não vai esperar pelo carregamento dos outros recursos. Por trás dos panos, essa função utiliza a biblioteca nativa do javascript chamada DOMContentLoaded (até mesmo nas versões mais antigas do jQuery para IE6/7/8

document.addEventListener("DOMContentLoaded", start);

Eu costumava a me preocupar com esse tipo de bobagem. É desnecessário.
Apenas rode seu script no final da página, logo após o fechamento da tag body e você saberá que seu DOM está carregado e pronto para utilização.

Eventos

Manuseio de eventos eram horríveis nos dias pré-jQuery. O Internet Explorer 6/7 e 8 implementaram diferentes modelos de eventos e mesmo aqueles navegadores que supostamente seguiram as especificações do W3C eram suficientemente inconsistentes para transformar o desenvolvimento algo incômodo. O jQuery faz com que eventos sejam simples de se compreender e implementar:

$("#elementoHtml").on("click", function(e) {
console.log("Você clicou em " e.target);
e.preventDefault();
});

Porém os equivalentes nativos não são assim tão complicados:

document.getElementById("elementoHtml").addEventListener("click", function(e) {
console.log("Você clicou em " e.target);
e.preventDefault();
});

Isto não vai funcionar no IE6/7/8, nem o jQuery 2.x. A maioria das bibliotecas fornecem uma solução temporária (alternativa) que registra eventos utilizando a velha attachEvent utilizada no Internet Explorer. Se você desejar apenas disparar um evento num nó específico do documento, é possível utilizar os métodos 'on' da DOM1 (cross-browser). Exemplo:

document.getElementById("elementoHtml").onclick = facaAlgo();

Ajax

Qual foi a última vez que você desenvolveu um projeto que exigia XMLHttpRequest, script injection, requisições GET, submissões POST, JSON e carregamento de imagens? 

jQuery é hábil em várias situações e, sendo flexível, você raramente vai utilizar todas as opções. Veja uma típica chamada Ajax via JQuery:

$.ajax({
url: "webservice",
type: "POST",
data: "a=1&b=2&c=3",
success: function(d) {
console.log(d);
}
});

O equivalente nativo:

var r = new XMLHttpRequest();

r.open("POST", "webservice", true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
console.log(r.responseText);
};

r.send("a=1&b=2&c=3");

11 de Julho de 2013 [17:21:42]

CEO da MDM Studio, Marcelo Motta participa ativamente do processo de produção de websites, tendo em seu portfólio mais de 130 trabalhos finalizados, entre marcas, websites e sistemas web. Os projetos mais recentes contam com a estrutura do HTML 5, combinados com CSS3 e versões mobile através de media queries.
 

TechNews

Informativos MDM Studio, Games e Tecnologia

Assine nosso Feed RSS