Não que essa idéia fosse “a aplicação ajax perfeita”, mas sim a ideal. Demoraria muito a ser feita, mas eu consideraria uma obra de arte.

Padronização

Essa parte é a parte fácil, que todo mundo sempre deveria se dar ao trabalho de fazer: manter seu trabalho dentro dos web standards.

Validar sua marcação, seus CSSs, isso todo mundo faz (ou deveria). Mas às vezes um certo item é deixado de lado: seus XMLs, que não causariam muito problema, a não ser um XML em especial: os feeds. Ou seja, valide tudo que possa ser validado.

Manutenção

Código bom é código comentado. Disso ninguém discorda. Sempre comente seus códigos, tanto para seu uso em futuras manutenções e atualizaçãoes, quanto para seus visitantes que querem descobrir o segredo daquela técnica inovadora que você implementou. JavaScript ninguém esconde, e uma técnica nova deveria poder chegar a todos que quisessem, mesmo que seja investigando seu código. Melhor ainda se ele estiver comentado, mesmo que seja somente em partes mais obscuras.

E o tamanho do código não aumentaria? Sim, mas você só precisará comentar partes essenciais, aquelas mais complicadas que você sabe que irá esquecer com o tempo. Além do mais, se você esquecer de seu código, perderá muito tempo até lembrar o que cada parte faz.

Compatibilidade

Outra parte facílima, mas indispensável. Se tudo for seguido, nem tanto, mas ainda assim se torna muito mais agradável usar uma aplicação que funcione como deveria funcionar.

Com todas as opções de browsers existentes hoje, sempre haverá aquele que terá problemas (geralmente o azulzinho que todo mundo já conhece). Mas existem maneiras de amenizar o problema. Isso não só com Ajax, mas qualquer “defeito” de JavaScript e CSS que possa atrapalhar a experiência do usuário.

Essa parte pode, sem problemas, ser deixada para os frameworks já existentes, que fazem seu trabalho muito bem. A compatibilidade vem sendo muito focada por essas bibliotecas, facilitando, e muito, seu trabalho.

Controle de readyStates

Agora começa a parte divertida. Tudo que está logo acima qualquer um faz. Vamos começar adicionando nossos diferenciais.

Geralmente, costuma-se cuidar de apenas dois readyStates: 1 e 4 (aberto e carregado), que resultam no clássico “Carregando…” e a requisição completa. Não que seja necessário, mas um controle completo de estados poderia ser bom.

O usuário saber que sua requisição está sendo processada ajuda, já que não pensaria que a requisição travou (isso acontece bastante quando a requisição demora demais).

Coloquei os readyStates, o que significam e uma sugestão para o texto de carregamento. Os readyStates 0 e 4 não precisam disso, já que 0 não tem muito uso, e 4 terá sua própria função.

• Não Inicializado (0)
• Aberto (1): “Abrindo Requisição” ou “Iniciando Requisição”
• Enviado (2): “Enviando Dados”
• Recebendo (3): “Carregando” ou “Recebendo Dados”
• Completo (4)

Não que seja necessário, mas também seria válido cuidar dos status da requisição também, pelo menos 200 (OK), 404, 500, e os outros erros mais comuns.

Histórico

Esse é o maior problema das aplicações Ajax. Já faz tempo que as primeiras soluções para histórico apareceram, e outras melhoradas, e ainda há centenas de aplicações que não se dão ao trabalho de implementar qualquer das soluções.

O histórico sempre deve ser implementado, mesmo que sua aplicação não queira dominar o mundo.

Cache

O cache, considerado uma praga por muitos, pode ser de uma grande ajuda para sua aplicação. Sempre que se faz uma requisição estática (que não muda em pouco tempo), deve-se usar o cache, pois quando refizermos essa requisição, ela terminará mais rápido.

Além do mais, usando o histórico, podemos guardar requisições “cacheadas” no próprio JavaScript. Assim, mais rápido ainda.

É claro que, em requisições dinâmicas, não devemos usar essa técnica. Ela pode prejudicar o usuário, pois não há maneira de atualizar a página através do F5.

Filas de Requisição

Todos sabem que se quando uma requisição estiver em andamento, e outra for iniciada, a primeira será cancelada.

Assim como o histórico, já existem milhares de soluções diferentes para fila de requisições. Esse recurso deve também ser usado sempre que possível (ou seja, sempre). Isso pode evitar aborrecimentos ao usuário.

Inobstrusividade

Essa é a questão mais polêmica. Sua aplicação não deve usar JavaScript obstrusivo (ou usar o menos possível), fazendo-a de maneira que funcione corretamente em qualquer browser.

E o Ajax sem JavaScript, como fica? Também tive idéias mirabolantes quanto a isso. Você deve usar o mesmo script server-side tanto para requisições assíncronas (Ajax) quanto para as síncronas (me refiro àquelas via browser). Para isso, usamos aquele header X-Requested-With, que seu server-side deve identificar.

Dessa maneira, não “trancamos” o conteúdo nem ao usuário nem aos buscadores e afins. Benefícios ao usuário e a você (e ao seu bolso, se for o caso).

Lembre-se de tornar o conteúdo Ajax-less atrativo aos olhos do usuário também, usando o mesmo layout do resto da aplicação (ou a mesma estrutura, caso seja XML).

Desempenho

O desempenho é outra característica muito essencial. Em tráfego de dados muito grande, devemos tomar cuidado com o JavaScript. Muito XML gera muitas chamadas ao DOM, e isso leva tempo. Aí o JSON entra em cena.

O Profiler do Firebug pode ser muito útil, já que ele monitora o tempo de execução da sua aplicação e das requisições que ela faz.

Bem, é isso. Quem sabe um dia veremos uma aplicação destas. Estou trabalhando em uma função que faça boa parte disso, espero que consiga terminar. Fui!

Posts Relacionados

• Hijax: Ajax Acessível
• Ajax vs. Acessibilidade
• Fila de Requisições em Ajax
• Ajax vs. Moda vs. Performance
• Ajax: Requisições HEAD

Vamos resolver o problema por partes, na seguinte ordem:

• Bookmarking
• Histórico
• Correções para o IE
• Aperfeiçoamentos
• Código Completo e Uso

Vale lembrar também que estou escrevendo códigos para cuidar do histórico para JavaScript, e não só Ajax (aliás, todas as soluções anteriores faziam isso, mas pouca gente se tocou).

Código Base

Usaremos a seguinte página-base para testarmos nosso script:

<html>
<head>
<title>BackButton Fixes</title>
<script>
var appHash = ""; // Não se preocupe com essa linha agora...
</script>
</head>
<body>
<select id="select">
<option value="option-0">-- Change --</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
</body>
</html>

Como testaremos a navegação somente com JavaScript, não precisaremos fazer qualquer requisição Ajax. Portanto, não precisaremos de uma função para tal.

Bookmarking

Como na navegação via JavaScript não mudamos a URL, não podemos fazer bookmarking, já que a aplicação, sempre que acessada, estará no estado inicial. A única maneira de permitir o bookmarking seria mudando a URL.

Como sempre estaremos na mesma página, acrescentaremos apenas um fragmento após o nome do arquivo. Poderíamos optar pelas query strings (file.ext?param=value), mas elas atualizariam a página quando fossem mudadas. Então optaremos pelos hashes (file.ext#hash), que não atualizam a página e podem ser mudados à vontade.

Primeiramente, quando a página é carregada, precisamos verificar se houve bookmarking:

function initialize() {
  var browserHash = window.location.hash.substring(1); // Hash da barra de navegação
  browserHash = (!browserHash) ? 0 : browserHash; // Hash padrão
  $("select").selectedIndex = browserHash;
}

Não se esqueça de modificar a tag body para <body onload="initialize()"> (nos preocuparemos com obstrusão depois), e de criar a função $() para pegar elementos pela ID.

Se especificarmos um hash “1″ ou “2″, nosso select mudará quando atualizarmos a página, ele não mudará automaticamente. Mas já temos nosso bookmarking inicial.

Por enquanto, quando mudamos nosso select, a URL não muda. Isso significa que nosso usuário terá que adivinhar qual hash deverá usar, o que não é bom. Precisamos de uma função que mude o hash do navegador quando mudarmos as opções do select:

function makeBookmark() {
  window.location.hash = "#" + $("select").selectedIndex; // Muda o hash da página
}

E também devemos modificar nosso select para <select id="select" onchange="makeBookmark()">. Agora, toda vez que trocamos as opções do select, o hash do navegador muda para podermos fazer o bookmark mais tarde.

Até o presente momento, tudo funcionando no IE, no FF e no Opera. Note que no FF e Opera o histórico já é ativado, embora não faça efeito.

Histórico

Atualmente, os browsers não disparam evento algum quando voltamos ou avançamos no histórico. Sendo assim, não existe nenhuma maneira “automática” que nos ajude a verificar quando navegarmos pelo histórico.

Para fazer a verificação, executamos uma função em um curto intervalo de tempo. Essa função verifica se o hash do browser se refere ao estado da aplicação. Se for falso, faz as modificações necessárias.

Vamos começar fazendo as alterações necessárias para a função initialize:

function initialize() {
  handleHistory(); // Verificação inicial
  window.setInterval(handleHistory, 100); // Intervalo para verificação
}

Essa é a função que faz a verificação inicial e “agenda” as próximas, a cada 100 milissegundos. A função que faz a verificação é a seguinte:

function handleHistory() {
  if(window.location.hash != appHash) { // Verificação de Estado
    appHash = window.location.hash; // Trocamos o estado da aplicação
    $("select").selectedIndex = window.location.hash.substring(1); // Trocamos a opção selecionada
  }
}

Ela compara o hash da aplicação (que é o appHash, variável global lá do início do nosso script) com o hash do browser. Se forem diferentes, faremos as adaptações, em nosso caso seria a mudança das opções do select.

Outra modificação necessária em nosso script será a função makeBookmark, que agora se chamará makeHistory:

function makeHistory(newHash) {
  window.location.hash = "#" + newHash;
  appHash = newHash;
}

Ela será executada toda vez que mudarmos as opções do select. O select também deverá ser mudado para <select id="select" onchange="makeHistory(this.selectedIndex)">.

Note que temos alguns problemas: quando no estado inicial, não temos diferença entre appHash e o hash do browser, fazendo com que nada aconteça (causa problemas com o uso de Ajax), e ainda não temos o funcionamento desejado nem no IE nem no Opera.

Correções para o IE

O IE sempre foi do contra, e ele não abriu excessão para nossa técnica anterior. Quando trocamos o hash da página, o IE não ativa o histórico, e não há maneira de contornar isso sem a gambiarra. Essa gambiarra seria o uso de um iframe escondido, do qual falaremos daqui a pouco.

Como você já deve ter entendido o espírito da coisa, vou postar o código inteiro, e vou explicando as linhas que forem necessárias, até porque alguém pode ter se perdido.

var appHash = "";
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") > -1) ? true : false;
function $(id) { return document.getElementById(id); }
function makeHistory(newHash) {
  if(isIe === true)
    $("control-iframe").setAttribute("src", "control.htm?id=" + newHash);
  window.location.hash = "#" + newHash;
  appHash = newHash;
}
function handleHistory() {
  var browserHash = (hash = window.location.hash) ? hash : "#" + 1;
  if(browserHash != appHash) {
    appHash = browserHash;
    $("select").selectedIndex = browserHash.substring(1);
  }
}
function createIFrame() {
  var iFrame = document.createElement("iframe");
  iFrame.setAttribute("src", "control.htm?id=1");
  iFrame.setAttribute("id", "control-iframe");
  iFrame.style.display = "none";
  document.body.appendChild(iFrame);
}
function initialize() {
  if(isIe === true)
    createIFrame();
  handleHistory();
  window.setInterval(handleHistory, 100);
}

Vamos pela ordem. Na função initialize, criamos um iframe escondido se o browser for o IE (definido pela variável isIe, lá no começo), através da função createIFrame, sem mistério.

Na função makeHistory, trocamos a URL do iframe (se for o caso), forçando sua atualização (veremos porque mais tarde).

No iframe, temos o seguinte código:

<html><head><script type="text/javascript">
frameUrl = window.location.search.substring(4);
parentHash = (typeof(hash = parent.location.hash.substring(1)) != "undefined" ? hash : "");
if(frameUrl != "")
  parent.location.hash = frameUrl;
</script></head><body></body></html>

Toda vez que o iframe é atualizado (seja pelo usuário ou pela navegação no histórico), ele muda o hash da página pai, nos permitindo fazer a verificação de estados.

Também fiz uma pequena modificação: estado inicial (caso não haja um hash) para o FF/Opera. Na parte do IE já fiz direto.

Aperfeiçoamentos

Para facilitar o uso, e por causa de alguns bugs existentes, fiz algumas modificações no código ao longo do tempo. Não irei explica-las agora, isso fica para uma outra oportunidade.

O código completo do script, corrigido e atualizado, é esse:

var appHash = "";
var appIndex = "";
var appDefault = "home";
var appFunction = function(){};
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") > -1) ? true : false;
function $(id) { return document.getElementById(id); }
function makeHistory(newHash) {
  if(isIe === true)
    $("control-iframe").setAttribute("src", "control.htm?id=" + newHash);
  else if(newHash != appIndex)
    window.location.hash = newHash;
  else
    go2index();
}
function handleHistory() {
  var browserHash = (hash = window.location.href.split("#")[1]) ? hash : "";
  if(browserHash != appHash) {
    if(browserHash != "") {
      appFunction(browserHash);
      appHash = browserHash;
      makeHistory(browserHash);
	}
	else {
	  clearInterval(checkInterval);
	  window.location.hash = appHash;
	  makeHistory(appIndex);
	}
  }
}
function createIFrame() {
  var iFrame = document.createElement("iframe");
  iFrame.setAttribute("src", "control.htm?id=" + (hash = window.location.href.split("#")[1]) ? hash : appDefault);
  iFrame.setAttribute("id", "control-iframe");
  iFrame.style.display = "none";
  document.body.appendChild(iFrame);
}
function initialize() {
  if(isIe === true)
    createIFrame();
  checkBookmark();
  checkInterval = setInterval(handleHistory, 100);
}
function checkBookmark() {
  var browserHash = (hash = window.location.href.split("#")[1]) ? hash : "";
  window.location.hash = (browserHash == "") ? appDefault : browserHash;
}
function go2index() {
  window.location = window.location.href.split("#")[0] + "#";
  window.location.reload();
}
function goTo(strUrl) {
	window.location.hash = strUrl;
	appFunction(strUrl);
}

E o código do iframe control.htm é:

<html><head><script type="text/javascript">
frameUrl = window.location.search.substring(4);
parentHash = (typeof(hash = parent.location.href.split("#")[1]) != "undefined" ? hash : "");
if(parentHash != "" && frameUrl == parent.window.appIndex)
  parent.window.go2Index();
else if(frameUrl != "" && frameUrl != parent.window.appIndex)
  parent.location.hash = frameUrl;
</script></head><body></body></html>

Pra usar a função, você faz sua página normalmente. Você precisará criar um arquivo com todo o script acima, e inclui-lo em sua página. Você também precisará criar o arquivo control.htm, o nosso iframe.

No script, você poderá mudar as variáveis appDefault (hash inicial), appIndex (hash que deve atualizar a página) e appFunction (função que faz a navegação). Para executar sua função de navegação, chame a função makeHistory, passando a query string como parâmetro.

Simples, não? Não, mas é fácil de usar. Dúvidas, bugs, sugestões, qualquer coisa que possa ajudar, é só comentar!

Créditos

Não criei tudo isso do nada, me baseei em algumas idéias já existentes. As principais foram de Mike Stenhouse (idéia original), Bernardo Rufino (aperfeiçoamentos), Dekassegui (correções e personalizaçãoes), e um pouco da minha idéia quase-original também (que não me lembro o nome do sujeito que tinha postado um rascunho em um fórum por aí).

Posts Relacionados

• Estatísticas para Navegação via JavaScript
• Botão Voltar para IE
• Ativando o Botão Voltar
• innerOptions
• Back Button Improved!

Nessa segunda parte sobre Drag and Drop, vou explicar como “soltar” os objetos, como prometido no post anterior. Ficou curioso? Então vamos ao trabalho.

Antes de começar, vamos tomar como exemplo uma lixeira: devemos carregar itens para dentro dela. Simples, não acha? Pois é, se você respondeu “sim”, ledo engano.
Como estamos carregando um item, ele ess carregando um item, ele está sempre diretamente abaixo do ponteiro do mouse. Desse modo, é impossível disparar um evento de mouse (mouseup, mousedown, mouseover…) em qualquer elemento da página. Se você carregar um item para uma lixeira, o mouse ainda estará acima do elemento, e não da lixeira.
Existem algumas maneiras para resolver o problema, muito fáceis até. O problema da maioria delas é o mesmo: estética. Não mover o elemento até que o mouse seja soltado, colocar o elemento logo abaixo do ponteiro, entre outras coisas não muito bonitas de se ver.
Mas pra tudo existe uma solução. Difícil, mas é uma boa solução. O plano é o seguinte: vamos criar uma lista de todos os alvos. Não vamos atirar em ninguém, esses alvos serão os lugares onde os itens podem ser largados. Quando o botão do roedor eletrônico for soltado, checaremos a posição do mouse e a posição de cada alvo, para sabermos se o ponteiro está em cima de algum desses alvos.
Vamos ao código:

/*
Ainda precisamos de todo o código dos exemplos anteriores,
com exceção da função mouseUp (substituída agora)
*/

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i < dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);

		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
// Aqui executamos a ação desejada.
		}
	}

	dragObject   = null;
}

Usamos assim: definimos um alvo com a função addDropTarget, assim como makeDraggable de antes. Quando soltamos o mouse, a função mouseUp checa a posição de cada alvo e a posição do mouse, e então executa a ação que precisamos.
Tudo OK, tudo prontinho. É claro que o resto é criatividade: containers, organização de dados, alguma coisa pra ser carregada pela sua página, ou qualquer outra bugiganga sem muita utilidade. Até!

Este texto é uma versão do original, How to Drag and Drop in JavaScript.

Posts Relacionados

• Drag and Drop – Parte 1
• JavaScript Orientado a Objetos – Parte 1
• JavaScript Orientado a Objetos – Parte 2
• JavaScript Orientado a Objetos – Parte 3
• Estendendo Objetos DOM

Capturando Movimentos do Mouse

A primeira coisa que devemos fazer é capturar as coordenadas do mouse quando ele se move. Isso é feito adicionando uma função ao evento document.onmousemove.

document.onmousemove = mouseMove;// Essa não é a melhor maneira de fazer isso// Quando for "de verdade", use addEventfunction mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);}function mouseCoords(ev){        if(ev.pageX || ev.pageY){                return {x:ev.pageX, y:ev.pageY};        }        return {                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,                y:ev.clientY + document.body.scrollTop  - document.body.clientTop        };}

Primeiro vamos ao evento. Praticamente tudo que fizemos quando estamos em uma página dispara um evento (um clique, um movimento de mouse, uma tecla pressionada…). No IE, esse evento é global, e fica na variável window.event. Nos browsers de verdade (Firefox, Opera, Safari…), esse evento é passado como argumento para a função que está vinculada a ação.
Sempre diferente, o IE dá um jeito de atrapalhar. Nos browsers (Firefox, Opera, Safari…, IE não é browser), event.pageX e event.pageY representam a posição do mouse em relação ao documento, onde o topo esquerdo é a posição 0×0. Se você rolar a página 100 pixels abaixo, pageY será 100, e assim por diante.
Já se você clicar num ícone com um “E” azul e for testar, a posição do mouse em relação a janela estará armazenada em event.clientX e event.clientY. Assim sendo, mesmo se você rolar a página (e manter o mouse no lugar), a posição será sempre 0×0 (já que a posição é em relação a janela, e não ao documento inteiro). As variáveis scrollTop e scrollLeft nos ajudam a resolver o problema, já que elas armazenam a “quantidade” rolada. Piorando um pouco a situação (e aumentando mais um termo em nossa expressão algébrica “made-for-ie”), o documento não fica na posição 0×0, há uma pequena borda ao redor. document.body.clientLeft e document.body.clientTop contém a largura dessa borda.
Pra não nos preocuparmos com isso, o dito cujo criador da função (que permanece desconhecido pra mim) deixou tudo pronto. Em todos os exemplos, suprimirei essa função, mas ela deve estar lá sempre!

Capturando Cliques do Mouse

Agora precisamos saber quando o botão do mouse é pressionado e quando ele é soltado. Novamente usamos os eventos, agora onmousedown e onmouseup. Note que eles não devem ser vinculados ao documento, e sim ao objeto que queremos arrastar. Assim só eles poderão ser arrastados, e não o documento.

document.onmouseup = mouseUp;var dragObject     = null;

function makeClickable(object){        object.onmousedown = function(){                dragObject = this;        }}

function mouseUp(ev){        dragObject = null;}

A variável dragObject conterá o objeto que está sendo carregado. Se o objeto for “arrastável”, e clicarmos nele, ele vai pra essa variável. Caso contrário, ela permanece nula. E quando soltamos o botão do mouse, idem. E para tornar um objeto possível de se arrastar (“arrastável”, não sei se isso existe), usamos a função makeClickable, passando o dito objeto como parâmetro.

Movendo um Objeto

Agora na reta final. Primeiro, para podermos arrastar um objeto, precisamos que o estilo position seja absolute, obviamente porque a sua posição é relativa ao topo esquerdo do documento, assim como a posição do mouse.
Uma vez que objeto.style.position = "absolute", tudo que temos que fazer é mudar os estilos top e left. So, voila! Só falta saber como fazer isso:

document.onmousemove = mouseMove;document.onmouseup   = mouseUp;

var dragObject  = null;var mouseOffset = null;

function mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);}

// mouseCoords(ev)...

function getMouseOffset(target, ev){        ev = ev || window.event;

     var docPos    = getPosition(target);        var mousePos  = mouseCoords(ev);        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}

function getPosition(e){        var left = 0;        var top  = 0;

     while (e.offsetParent){                left += e.offsetLeft;                top  += e.offsetTop;                e     = e.offsetParent;        }

     left += e.offsetLeft;        top  += e.offsetTop;

     return {x:left, y:top};}

function mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);

     if(dragObject){                dragObject.style.position = 'absolute';                dragObject.style.top      = mousePos.y - mouseOffset.y;                dragObject.style.left     = mousePos.x - mouseOffset.x;

             return false;        }}function mouseUp(){        dragObject = null;}

function makeDraggable(item){        if(!item) return;        item.onmousedown = function(ev){                dragObject  = this;                mouseOffset = getMouseOffset(this, ev);                return false;        }}          

Esse “juntão” de códigos (e alguns a mais) nos permite mover livremente um objeto (desde que seja “arrastável” (preciso de um substituto pra essa palavra), através de makeDraggable).
Algo mais que possa interessar: quando clicamos em um item (item = objeto “arrastável”, ufa), guardamos outra variável: mouseOffset. Ela contém o lugar em que clicamos em nosso item. Isso para que possamos posicionar o item abaixo do mouse da mesma maneira quando clicado.
Outra função diferente que usamos: getPosition. Ela retorna a posição de um item relativo ao documento. Como seu offsetLeft e offsetTop são relativos ao seu elemento pai, a função vai somando até chegar ao documento.

Soltando um Objeto

Até agora cumprimos tudo, carregamos o item para qualquer lugar da página. Mas podemos fazer mais que isso, como encaixar o item em um lugar específico, ou carrega-lo para uma lixeira, pasta…

Isso é legal, concorda? E tenho um segredo pra contar: só na parte 2, até!

Não esqueça de ler a parte 2 do artigo!

Posts Relacionados

• Drag and Drop – Parte 2
• Firefox, Event Listeners e Return
• JavaScript Orientado a Objetos – Parte 1
• JavaScript Orientado a Objetos – Parte 2
• JavaScript Orientado a Objetos – Parte 3

Fuçando na Mootools

Como estou desenvolvendo uma biblioteca, não quero que seja necessário outras para fazê-la funcionar. Então fui fuçar na Mootools. Achei a “solução” para nosso “problema”. Vamos criar algumas funções daqui a pouco, baseadas em Object.extend, Element.extend e $. É tudo que iremos precisar para estender nossos objetos.
Utilizaremos a mesma idéia do Bernardo (estender objeto por objeto), mas de uma maneira diferente (apenas os elementos retornados pela função $ serão estendidos).

As Funções para Estender

As funções que apresentarei a vocês vêm diretamente da minha biblioteca. Elas tem algumas pequenas modificações que julguei necessárias, mas são praticamente a mesma coisa.

Object.extend = function(objDestination, objSource) {  if(typeof objSource == "undefined") {    objSource = objDestination;    objDestination = this;  }  for(var property in objSource)    objDestination[property] = objSource[property];  return objDestination;}Element.extend = function(objSource) {  return Object.extend(Element.prototype, objSource);}

Antes de Element.extend, precisamos definir a função Element, também da minha biblioteca, também baseada na Mootools.

var Element = function(mElement) {  if(typeof mElement == "string")    mElement = document.createElement(mElement);  return $(mElement);}

Quase tudo que precisamos está aí. Agora falta a função $, que retornará nossos objetos DOM já estendidos.

A função pra objeto e$tendido

Como já disse, apenas os objetos retornados por $ serão e$tendidos. Essa função retornará o objeto estendido com tudo que estiver no protótipo (prototype) da “classe” Element. Mais simples: todos os métodos da “classe” Element estarão em todos os objetos retornados por $. Como? Vamos codificar:

// Adaptado da Mootoolsvar $ = function(el) {        el = document.getElementById(el);        el.extend = Object.extend;        el.extend(Element.prototype);        return el;}

Pronto, aí está! That’s all folks! Peraí, ainda não. Não vão embora ainda, temos que estender Element ainda! Lembre-se, tudo que estiver em Element está nos objetos retornados em $.

Estendendo Element

Caramba, postagem concisa essa, não? Estende isso, aquilo… Vou deixar que o código abaixo se auto-explique:

Element.extend({  "metodo": function() { alert(this.innerHTML); },  "bold": function() { this.style.fontWeight = "bold"; }}

Estendemos (quase) tudo. Cada par desses aí resultará em um método (nesse caso, 2 pares, 2 métodos). Colocamos dois métodos no prototype de Element, e eles irão parar nos nossos objetos DOM.

Reaproveitando isso tudo

Um dos grandes méritos da POO é que podemos reutilizar tudo. Usando Object.extend, você pode estender qualquer objeto: strings, arrays, objetos DOM individuais, qualquer coisa. Basta chamar a função com dois argumentos: objDestination (objeto de destino) e objSource (métodos ou propriedades a serem adicionados, no formato JSON).
Espero que eu tenha sido claro, e utilizem bem!

Posts Relacionados

• Estendendo o JavaScript
• JavaScript Orientado a Objetos – Parte 1
• Mootools – Classes
• JavaScript Orientado a Objetos – Parte 2
• JavaScript Orientado a Objetos – Parte 3