28/07/2008 foi a data do meu último artigo publicado no iMasters. É quase um ano e sinceramente: estou com muitas saudades de vocês. Saudações.

Nesse meu retorno decidi focar em dois assuntos: jQuery e WordPress. Num primeiro momento, vamos iniciar pela a biblioteca JavaScript onde escrevemos menos e fazemos mais. Sim, a jQuery.

Se você fizer uma busca no iMasters por jQuery encontrará bons artigos e dentre eles um que recomendo a leitura: Visão geral sobre o JQuery de autoria do Mauricio Samy.

Meu objetivo é escrever uma série partindo do princípio e avançando a cada publicação. Vamos agradar gregos e troianos fazendo alusão aos iniciantes e experientes, aos designers e programadores. Vamos lá.

Existem diversas maneiras de executar um código jQuery ao carregar uma página web. Embora todos tenham o mesmo objetivo: executar tal código, se faz necessário reconhecer essas maneiras e saber como usá-las.

O problemático código abaixo é antigo e foi muito utilizado por programadores JavaScript até a proliferação das bibliotecas JavaScript como a jQuery. Observe-o:

window.onload = function() {
	// códigos JavaScript a serem executados quando a página carregar
}

O objetivo é simples: executar uma função quando a página carregar por completo. O problema: os códigos são executados somente quando as imagens também forrem carregadas. E isso inclui os banners, milhares de fotos, ícones, dentre outros. #fail.

Em 99.99% dos casos, os códigos JavaScript precisam ser carregados quando o DOM (Document Object Model) está pronto para ser lido e manipulado. Ciente disso, a jQuery possui o método Ready. Pronto em tradução livre. E é tal método que utilizamos hoje para substituir o problemático código apresentando anteriormente.

O grande lance da jQuery é selecionar algo e fazer alguma coisa com esse algo. Se precisamos executar um código ao carregar a página, logo teremos que selecionar o documento e executar os códigos necessários quando ele estiver a nossa disposição. Segue exemplo:

$(document).ready(function(){
	// códigos jQuery a serem executados quando a página carregar
 });

A grande diferença entre esse código e o apresentado anteriormente, se resume ao fato de os códigos serem executados sem a necessidade de aguardar o carregamento das imagens relacionadas à página. O que nos garante uma maior confiança em atender os anseios dos usuários frente aos recursos desenvolvidos e dependentes de códigos JavaScript num site ou aplicação.

O código acima ainda pode ser reescrito de uma forma abreviada e mais simples. Veja:

jQuery(function($) {
	// Códigos jQuery a serem executados quando a página carregar usando o pseudônimo (alias) $ de forma a não conflitar com outras bibliotecas JavaScript.
});

ou assim:

$(function() {
	// Códigos jQuery a serem executados quando a página carregar e correndo o risco de conflitar com outras bibliotecas JavaScript
});

Nos exemplos acima observamos uma abreviação em invocar o método Ready da jQuery. Eles se diferenciam pela forma como são chamados. No primeiro exemplo usamos jQuery e no segundo o famoso $. Esse último é comumente utilizado em bibliotecas JavaScript o que pode resultar num conflito em nome de funções quando há várias bibliotecas inseridas numa mesma página. Logo, é uma melhor prática adotar a primeira opção no lugar da segunda.

Se ainda preferir a segunda opção, considere escrevê-la assim:

( function($) {
	$(function() {
		// códigos jQuery a serem executados quando a página carregar 
	});
})(jQuery);

Isto é, passamos o objeto jQuery à função e assim podemos usar o pseudônimo (alias) que quisermos. No exemplo, utilizamos o famigerado $.

Para finalizar, um modelo de organização de código jQuery que tenho adotado e estou a compartilhar com vocês.

( function($) {
	$(function() {
		iMasters.init();
	});
	var iMasters = {
		init : function() {
			// Execute seus códigos iniciais
			// ...

			// Chame as funções desejadas...
			iMasters.outraFuncao();
		},
		outraFuncao : function() {
			// Códigos desejados...
		}
	};
})(jQuery);

Com esse artigo espero ter apresentado e explicado algumas formas de executar códigos jQuery ao carregar a página. Forte abraço e me siga @leandrovieira.

PS. Aguardo sugestões de artigos. Assim terei uma noção sobre qual caminho seguir. Conto com vocês.