como escrever um código javascript limpo e bonito
Ajax File Browser System
Com o AJAX File Browser conseguimos listar todas as sub-pastas e ficheiros de um disco e ainda abrir alguns ficheiros .doc .xls .ppt caso tenha o MS OFFICE instalado.
Com um visual e funcionamento muito parecido ao explorer do Windows Vista e permite ainda o upload de ficheiros para o servidor.
Corre nos seguintes browsers:
- Internet Explorer 7
- Mozilla Firefox 2 or later
- Safari 3.0.4 or later
- Google Chrome 0.3.154.9 or later
- Netscape Navigator 9 or later
Pode encontrar outras APIs como map drive em http://www.webdavsystem.com
How global is your JavaScript?
Mats Bryntse “had an idea about checking the most popular javascript frameworks & APIs to see how they differ in terms of global namespace pollution. This page loads all the frameworks separately in an iframe and compares the window object against the one of a fresh iframe. I also included information about which builtin JavaScript classes have been augmented, not sure how that would be useful but it shows a difference in architectural approach between the frameworks. You can click a row to see the details about the global symbols in the framework/API.
The results vary more than I’d expected and it’s interesting to see the different namespacing strategies at play. YUI/Jquery/Ext keep the numbers down by putting everything in one global object. It seems like Microsoft is using their own kind of namespacing using the $ sign as a namespace delimiter rather than using real object properties as the rest of the frameworks do.”
You can check this out via his checker page. An interesting read and you can narrow in on APIs of your choice.
We like to talk about how evil global variables are, but I wonder if we take this a touch too seriously sometimes. Sure there can be collisions and the like, but a lot of projects are doing just fine 
via : ajaxian.com
Como optimizar o seu Javascript e comprimir o css para loads mais rápidos
O packed.it Web 2.0 é um serviço on-line capaz de optimizar e melhorar a navegação na web. É simples, rápido e fácil de personalizar.
Packed.it é a solução para a Web 2.0, é compatível com a maioria dos browsers e com as melhores práticas em termos de acessibilidade.
artigo completo em :
Javascript: Regular Expression
Neste artigo eu vou usar tanto a palavra expressões regulares como Regular Expression (inglês). Eu vou usar em português para facilitar, mas esse nome não existe em português.
As expressões regulares são padrões utilizados para encontrar combinações de caracteres em Strings. É uma ferramenta muito poderosa porque consegue resumi em algumas linhas de código pesquisas altamente complexas. O principal uso de expressões regulares em Javascript seria na validação de dados.
Em JavaScript, expressões regulares também podem ser tratadas como um objeto. Esses padrões são usados com os métodos exec e test do objeto RegExp, e com os métodos match, replace, search, e split do objeto String.
Algumas das traduções deste artigo não são totalmente fieis. Espero que consigam entender o que a mensagem está passando.
Entendendo as Expressões Regulares
As expressões regulares podem ser criadas de duas formas:
- Escrevendo uma expressão regular:
seek = /padrao/
padrao é a string padrão para ser usada na pesquisa.
- Criando uma instancia do objeto RegExp:
seek = new RegExp(“padrao”);
padrao é a string padrão para ser usada na pesquisa.
Regular Expression é um padrão de texto que consiste de simples caracteres (da letra a até z, ou de 1 até 9) e de uma combinação de caracteres simples e especiais.
Os padrões para a pesquisa de caracteres estão divididos em categorias. Segue abaixo uma lista dos grupos e respectivos caracteres especiais.
Busca posicionada
|
Símbolo |
Descrição |
Exemplo |
|
^ |
Busca somente no início da string |
/^The/ encontra “The” em “The night” mas não em “In The Night” |
|
$ |
Busca somente no fim da string |
/and$/ encontra “and” em “Land” mas não em “landing” |
|
\b |
Encontra em qualquer parte da string |
/ly\b/ encontra “ly” em “This is really cool.” |
|
\B |
Encontra qualquer parte que não esteja limitada |
/\Bor/ encontra “or” em “normal” mas não em “origami.” |
Literais
|
Símbolo |
Descrição |
|
Alfanumerica |
Todos os caracteres alfabéticos e numerais se encontram literalmente. Então /2 dias/ encontrarão “2 days” dentro da string |
|
\n |
Encontra o caractere de nova linha |
|
\f |
Encontra o caractere de nova página |
|
\r |
Encontra o caractere de retorno de carro |
|
\t |
Encontra o caractere de tabulação horizontal |
|
\v |
Encontra o caractere de tabulação vertical |
|
\xxx |
Encontra o caractere ASCII expresso por um número octal xxx. |
|
\xdd |
Encontra o caractere ASCII expresso por um número hexadecimal dd. |
|
\uxxxx |
Encontra o caractere ASCII expresso por UNICODE xxxx. |
A barra invertida (\) é também usada quando você deseja encontrar um caractere especial literalmente. Por Exemplo, se você deseja encontrar o símbolo “$” ao invés de ter um sinal no final da string, use a barra invertida: /\$/
Classes de Caracteres
|
Símbolo |
Descrição |
Exemplo |
|
[xyz] |
Encontra qualquer caractere que estiver dentro do grupo. Você pode usar hífen para denotar escala. Por Exemplo. /[a-z]/ encontra qualquer letra do alfabeto alphabet, /[0–9]/ encontra qualquer dígito |
/[AN]BC/ encontra “ABC” e “NBC” mas nao “BBC” desde que a letra “B” nao estao nogrupo. |
|
[^xyz] |
Encontra qualquer caractere que não estiver dentro do grupo. O circunflexo indica que nenhuma caractere deve estar na string. |
/[^AN]BC/ encontra “BBC” mas nao “ABC” ou “NBC”. |
|
. |
(Ponto). Encontra qualquer caractere exceto o caractere de nova linha ou terminador de linha Unicode |
/b.t/ encontra “bat”, “bit”, “bet” e assim por diante |
|
\w |
Enconta qualquer caractere alfanumérico incluindo underscore. Equivalente a [a-zA-Z0-9_] |
/\w/ encontra “200″ em “200%” |
|
\W |
Encontra qualquer caractere que não se encontra na classe dos alfanuméricos. Equivalente a [^a-zA-Z0-9_] |
/\W/ encontra “%” em “200%” |
|
\d |
Encontra qualquer dígito. Equivalente a [0–9] |
|
|
\D |
Encontra qualquer caractere que não seja um digito. Equivalente a [^0–9] |
/\D/ matches “No” in “No 342222″ |
|
\s |
Encontra qualquer caractere que equivale a um espaço. Equivalente a [ \t\r\n\v\f] |
|
|
\S |
Encontra qualquer caractere que não equivale a um espaço. Equivalent to [^ \t\r\n\v\f] |
|
Repetição
|
Símbolo |
Descrição |
Exemplo |
|
{x} |
Encontra exatamente x ocorrências na regular expression |
/\d{5}/ encontra 5 digitos |
|
{x,} |
Encontra x ou mais ocorrências na regular expression |
/\s{2,}/ encontra no minimo 2 caracteres de espaço em branco |
|
{x,y} |
Encontra x para y numero de ocorrências na regular expression |
/\d{2,4}/ encontra no minimo 2 mas nao mais que 4 digitos |
|
? |
Encontra zero ou nenhuma ocorrência. Equivalente a {0,1} |
/a\s?b/ encontra “ab” ou “a b”. |
|
* |
Encontra zero ou mais ocorrências. Equivalente a {0,} |
/we*/ encontra “w” em “why” e “wee” em “between”, mas nao em “bad” |
|
+ |
Encontra uma ou mais ocorrências. Equivalente a {1,} |
/fe+d/ encontra tanto em “fed” quanto em “feed” |
Alternação & Agrupamento
|
Símbolo |
Descrição |
Exemplo |
|
( ) |
Agrupamento de caracteres para criar uma cláusula de condição. Pode estar aninhado |
/(abc)+(def)/ encontra um ou mais ocorrencias de “abc” seguido por uma ocorrencia de “def” |
|
| |
Combina cláusulas de condições dentro de uma regular expression e então encontra qualquer uma das cláusulas. Similar à expressão “OR” |
/(ab)|(cd)|(ef)/ encontra “ab” ou “cd” ou “ef”. |
Backreferences
|
Símbolo |
Descrição |
Exemplo |
|
( )\n |
Encontra uma cláusula entre parênteses. n é o número de cláusulas para a esquerda da backreference |
(\w+)\s+\1 encontra quaisquer palavras que ocorra duas vezes na mesma linha, como “hubba hubba.” O \1 denota que a primeria palavra depois do espaço deve encontrar a porção da string que foi encontrada no último commando dentro de parênteses. Se existisse mais de um comando dentro de parênteses, você deve usar \2 ou \3 para encontrar o apropriado agrupamento da esquerda da backreference. Até 9 backreferences podem ser usadas no padrão da string |
Modificadores de Padrões
Em adição aos caracteres padrões para buscar, você pode usar switches para fazer uma pesquisa global, case– insensitive (ignora minúsculas e maiúsculas) ou ambas.
|
Propriedade |
Descrição |
Exemplo |
|
i |
Ignora se é minúscula ou maiúscula |
/The/i encontra “the” e “The” e “tHe” |
|
g |
Pesquisa Global para todas as ocorrências do padrão |
/ain/g encontra os dois “ain” em “No pain no gain”, ao inves de apenas o primeiro |
|
gi |
Pesquisa Global, e ignorar caso |
/it/gi encontra todos “it” em “It is our IT department” |
|
lastIndex |
Armazena a posição da última pesquisa bem sucessida realizada na string. Se nada for encontrado, a propriedade lastIndex será colocada como –1 |
|
|
$n |
n representa o numero de 1 a 9 |
|
|
source |
Armazena a copia do padrão da regular expression |
|
Entendendo os métodos usados pelas expressões regulares
|
Método |
Descrição |
|
exec |
Um método RegExp que executa pesquisas em uma string. O mesmo retorna um array das informações obtidas |
|
test |
Um método RegExp que testa uma pesquisa em uma string. O mesmo retorna true ou false |
|
match |
Um método de String que executa uma pesquisa em uma string. O mesmo retorna um array das informações obtidas ou nulo se nada for encontrado |
|
search |
Um método de String que testa uma pesquisa em uma string. O mesmo retorna o índice do resultado, ou –1 se a pesquisa falir |
|
replace |
Um método de String que executa uma pesquisa em uma string, e substitui o resultado encontrado por uma substring |
|
split |
Um método de String que usa uma regular expression ou uma string para quebrar uma string em uma array de substrings |
Quando você quer saber se o padrão foi encontrado na string, use o método test ou search; para maiores informações (mas com execução mais lenta) use o método exec ou match. Se você usar exec ou match e se obter sucesso, esses métodos retornaram um array e atualizaram as propriedades do objeto regular expression associado e também de objetos pré-definidos, RegExp. Se a pesquisa falir, o método exec retornará nulo (no qual converterá para false).
Programando Expressões Regulares
A partir do momento que sabemos quais caracters desejamos devemos partir para a criação do padrão que sera utilizado para pesquisar a String.
Vamos, a partir de agora, criar alguns exemplos práticos de como utilizar Expressões Regulares.
No nosso primeiro exemplo vamos pesquisar na string um padrão que é composto da palavra “de”. O O resultado obtido nos mostrará onde se encontra a primeira e a ultima ocorrência das pesquisas.
Exemplo:
1 <SCRIPT LANGUAGE=”JavaScript”>
2 padrao=/de/g;
3 // padrao = new RegExp(“de”,”g”);
4 texto = “Brasil ganha a medalha de ouro no volei de praia.”;
5 document.write(“<b>padrao » </b>” + padrao + “<br>”);
6 document.write(“<b>Texto utilizado » </b>” + texto + “<br>”);
7 document.write(“O padrao utilizado foi encontrado no <b>” + texto.search(padrao) + “º </b>caractere.<br>”)
8 padrao.exec(texto);
9 document.write(“O ultimo valor encontrado e” o caractere<b> ” + padrao.lastIndex + “º </b>.”);
10 </SCRIPT>
Linha 2 – Declaração da variável padrão com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 3 – Tem o mesmo funcionamento da linha 2, porém vai criar uma instância do objeto RegExp com a seqüência de caracteres.
Linha 7 – Utilização do método search() para encontrar o padrao na variável texto.
Linha 8 – Utilização do método exec para pesquisar a seqüência padrão na variável texto.
Linha 9 – Utilização da propriedade lastIndex para retornar a última vez que a seqüência de caracteres foi encontrada na variável texto.
Clique aqui para ver o exemplo 01.
Exemplo 02
Este exemplo é um pouco mais complexo. Ele valida a entrada de dados por parte do usuário. O usuário vai digitar um número de telefone como proposto no exemplo.
1 <SCRIPT LANGUAGE = “JavaScript”>
2 padrao = /\(?\d{3}\)?\d{3}-\d{4}/;
3 function testInfo(x) {
4 a = x.Phone.value;
5 OK = padrao.exec(a);
6 if (!OK){
7 window.alert (“Este numero de telefone esta incorreto!”);
8 x.Phone.focus();
9 } else {
10 window.alert (“Obrigado, seu numero de telefone e” » ” + OK[0]);
11 }
12 }
13 </SCRIPT>
Linha 2 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 3 – Declaração da função testInfo() que recebe um parâmetro com o objeto form a ser utilizado
Linha 4 – Declaração da variável a que armazena o valor do parâmentro x (o formulário) seguido do nome do campo e respectivo valor
Linha 5 – Declaração da variável OK que recebe o valor da verificação se o padrão re está contido na variável a
Linha 6 a 11 – Verificação da negação da variável OK. Se retornar true, uma caixa de mensagem será mostrada com uma mensagem de erro e o campo em questão receberá o foco. Se retornar false uma caixa de mensagem será mostrada com uma mensagem e o número do telefone.
Com todo o código Javascript criado, vamos à criação do código HTML.
1 Digite um número de telefone, como por exemplo » (201)465‑7899.
2 <FORM onSubmit=”return false;”>
3 <INPUT TYPE=”text” NAME=”Phone” onChange=”testInfo(this.form);”>
4 <input type=”button” value=”valida” onClick=”testInfo(this.form);”>
5 </FORM>
Linha 2 – O evento onSubmit retorna false para o formulário não seja enviado.
Linha 3 – O evento onChange da caixa de texto chama a função testInfo() e envia como parâmetro o objeto form.
Linha 4 – O evento onClick do botão chama a função testInfo() e envia como parâmetro o objeto form.
Clique aqui para ver o exemplo 02.
Exemplo 03
Neste exemplo vamos trabalhar com mais métodos e entender onde podemos chegar com apenas algumas linhas de código. Aqui nos dividimos uma string, colocamos seu resultado em uma matriz e ainda ordenamos a mesma.
1 <SCRIPT LANGUAGE=”JavaScript1.2″>
2 nomes = new String (“Thiago Prado ; Bill Gates ; Steve Jobs; Michael Dell ; Chris Hand “);
3 document.write (“<b>String Original</b>” + “<br>” + “<br>”);
4 document.write (nomes + “<br>” + “<br>”);
5 padrao = /\s*;\s*/;
6 listaNomes = nomes.split (padrao);
7
8 padrao = /(\w+)\s+(\w+)/;
9 novalistaNomes = new Array;
10 document.write (“<b>Apos ter sido dividido pela Expressao Regular </b>” + “<br><br>”);
11 for ( i = 0; i < listaNomes.length; i++) {
12 document.write (listaNomes[i] + “<br>”);
13 novalistaNomes[i] = listaNomes[i].replace (padrao, “$2, $1″)
14 }
15 document.write (“<br><b>Nomes revertidos</b>” + “<br><br>”);
16 for ( i = 0; i < novalistaNomes.length; i++) {
17 document.write (novalistaNomes[i] + “<br>”)
18 }
19 novalistaNomes.sort();
20 document.write (“<br> <b>Ordenados</b>” + “<br><br>”);
21 for ( i = 0; i < novalistaNomes.length; i++) {
22 document.write (novalistaNomes[i] + “<br>”)
23 }
24 </SCRIPT>
Linha 2 – Declaração da variável nomes com alguns nomes a serem utilizados no código
Linha 3 a 4 – Mostra na tela a variável nomes sem nenhuma alteração
Linha 5 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.
Linha 6 – Criação da matriz listaNomes com a divisão da string nomes a partir do padrão utilizado.
Linha 8 – A variável padrão recebe nova seqüência de caracteres a serem utilizados nas pesquisas.
Linha 10 a 14 – Mostra na tela a lista de Nomes depois da divisão
Linha 13 – A matriz novalistaNomes(indexada da variável do loop) recebe o valor da matriz listaNomes (indexada da variável do loop) que utiliza o método replace para trocar o primeiro nome pelo segundo. Isso é possível por causa do uso da expressão regular.
Linha 15 a 18 – Mostra na tela a lista de Nomes revertidos
Linha 19 – Utilização do método sort para ordernar a matriz novalistaNomes
Linha 20 a 23 – Mostra na tela a lista de Nomes Ordenados
Clique aqui para ver o exemplo 03.
Regular Expression é um assunto muito amplo, e não é possível abordá-lo em apenas alguns exemplos. Mas para o futuro eu vou preparar uma outra matéria com códigos mais poderosos para mostrar o que realmente quero dizer com “resumi em algumas linhas de código pesquisas altamente complexas”.
Fonte: Thiago Prado
Bibliotecas JavaScript
Mochikit
O Mochikit é o filho caçula de Bob Ippolito (o participante principal) e está disponível no site do Mochikit. O pacote principal tem aproximadamente 90 Kb (compactado), mas você pode carregá-lo em módulos separados. A biblioteca também é distribuída com a versão do framework do Python para web, chamada de TurboGears.
Nas palavras do Bob:
“Nós analisamos todas as idéias que poderíamos encontrar apartir da nossa experiência com Python e foram adaptadas ao mundo louco do JavaScript”
Assim, em uma visão macro, o Mochikit extrai algumas funcionalidades do Python para sua API. Se você é familiar com o Python, você terá um aprendizado imediato com o Mochikit, embora tenha uma API simples que seja razoavelmente fácil de utilizar. De todas as bibliotecas ressaltadas neste artigo, a API do Mochikit transmite ser a mais “preparada”.
Quando estiver começando com o Mochikit, você precisará:
- Assistir ao screencast do Bob.
- Começar utilizando o interpretador interativo excelente do Mochikit. Esta é uma boa maneira de entender a biblioteca e ter uma compreensão básica de como Mochikit trabalha.
O básico sobre Mochikit
Ao trabalhar com o DOM, o Mochikit traz alguns truques na luva:
var warning = P(
{ 'class' : 'warning' },
"Por favor insira um ", STRONG(null, "endereço de e-mail válido")
);
swapDOM(document.getElementById("notificacoes"), warning);
Este código usará os métodos W3C DOM relevantes para os nós da árvore equivalentes ao código HTML seguinte:
<p class="warning">Please provide a <strong>valid email address</strong></p>
O código do Mochikit está quase mais limpo do que a sintaxe do HTML!
O módulo do Mochikit.DOM contem também outros métodos para a manipulação fácil do DOM, tal como o método do swapDOM mencionado acima e toHTML (que converte um nó de DOM ao HTML que representa).
Assim como na manipulação de eventos, o Mochikit foi projetado para que seja implementado no módulo de Mochikit.Signal. Foi baseado em torno do conceito de conectar um ouvinte a um sinal que fosse emitido por um objeto. Todos os eventos regulares do DOM são sinais, mas você pode criar seus próprios também. O método conectar faz todo o trabalho aqui:
// conecta o sinal do onclick no elemento com id="thing"
// para a função showDialog, com pontos para este elemento.
connect($('thing'), 'onclick', showDialog);
// conecta o sinal do onsubmit para o elemento id="form" para
// o formController.checkSubmit, com pontos para o objeto formController.
connect($('form'), 'onsubmit', formController, 'checkSubmit');
Você pode fazer seus próprios objetos enviar sinais com o método do sinal:
signal(anObject, 'a_signal');
O material de AJAX é segurado pelo módulo Mochit.Async, e pelos objetos auxiliares que se encontram no núcleo de sua implementação. Para executar uma chamada básica de AJAX, use o loadJSONDoc ou doSimpleXMLHttpRequest:
var request = doSimpleXMLHttpRequest('opcoes.php',
{ q : 'desenvolvedor web'}
);
Esta função retorna um objeto auxiliar, em que você pode fazer novas chamadas:
request.addCallbacks(mySuccessFunction, myErrorFunction);
Quando o XMLHttpRequest se executa, a função passada na chamada acima (mySuccessFunction) passa o objeto do XMLHttpRequest como o argumento:
function mySuccessFunction(req) {
alert(req.responseText);
}
Os objetos auxiliares são úteis para a programação assíncrona e são uma grande idéia. Leia mais sobre o assunto, ou veja o screencast para mais detalhes.
Prós e contras
Primeiramente, a estrutura de log do Mochikit é excelente. Adicionar indicações simplesmente utilizando:
log("Bem melhor que o alert");
log("ERRO Esta coisa está quebrada");
O Mochikit faz uso também de características da programação funcional do Javascript para realçar e simplificar sua biblioteca API. Por exemplo, se você quiser classificar um grupo dos objetos por seus nomes de propriedades, você pode usar o keyComparator criar a função de classificação para você:
var sortedByName = people.sort(keyComparator("name"));
Há também a função counter. Ela cria uma função que retorna um valor que seja incrementado toda vez que for chamada:
var nextId = counter(); nextId(); //=> 1 nextId(); //=> 2 nextId(); //=> 3
Há também várias funções de iteração do estilo-Python, tais como forEach, map e filter.
Quanto a documentação, o Mochikit tem uma documentação boa da API, mas os detalhes em algumas partes muito básicas da biblioteca deixam a desejar. No detalhe, após ter lido toda a documentação, ter prestado atenção no screencast e ter escrito alguns scripts Mochikit, ainda sou incerto sobre qual a melhor versão da biblioteca para toda finalidade. Eu uso a versão compactada ou o Mochikit.js principal? Como posso carregar as partes individuais da biblioteca?
Entretanto, Mochikit tem uma lista de discussão que responde a estes tipos de perguntas.
Yahoo! UI
A biblioteca Yahoo! UI (YUI, como é apelidada) foi desenvolvida pelo Yahoo! para o uso interno, mas teve seu código aberto recentemente junto com uma gama de recursos excelentes para desenvolvedores em developer.yahoo.com.
O YUI é mais uma coleção distinta de “utilidades” do que uma biblioteca (como as que foram tratadas aqui), com cinco scripts principais que tratam de:
- animação
- AJAX
- manipulação DOM
- drag-and-drop
- tratamento de eventos
E há seis controles, chamados de:
- Calendar
- Slider
- Menu
- AutoComplete
- Tree View
- Container classes (com o qual você pode executar janelas no estilo de widgets)
Você pode fazer download de cada um destes scripts separadamente no site developer.yahoo.com.
Cada uma das bibliotecas do Yahoo! dependem somente do arquivo yahoo.js. Por outro lado, esta aproximação oferece uma experiência ligeiramente mais menos coerente para o desenvolvedor e poderia possivelmente introduzir uma determinada quantidade de repetição dentro das bibliotecas.
Uma coisa ineficaz sobre o YUI é o fato de que usa muito espaço inútil de strings. Cada chamada que você faz à biblioteca necessita ser prefixada com uma string do pacote:
var myAnim = new YAHOO.util.Anim(
'test',
{ height: {to: 10} },
1,
YAHOO.util.Easing.easeOut
);
myAnim.animate();
O básico sobre YUI
A biblioteca de tratamento de eventos do YUI tem uma API muito familiar daquelas que são usadas nativamente no browser. Entretanto, tem algumas surpresas agradáveis que o desenvolvedor do Yahoo!, Dustin Diaz, explicou em detalhes neste site. Você pode adicionar um simples “ouvinte” como este:
YAHOO.util.event.addListener('object_id', 'click', callBackFunction);
Uma característica muito poderosa da biblioteca de eventos é seu chamado ouvintes de evento. Essencialmente, se você tentar unir um “ouvinte” a um elemento que não exista porque a página não carregou ainda, esperará essa página para tornar-se disponível antes de unir ao evento. Esta é uma solução que talvez confunda e frustre muitos novatos de DHTML.
A biblioteca de DOM resume as inconsistências do browser, permitindo o ajuste de estilos das propriedades do elemento. Entretanto, enquanto toma cuidado das tarefas comuns, existem algumas surpresas aqui:
- get é versão da função $ no YUI.
- Um método interessante é o generateId, que pode ser usado gerar IDs para elementos para que você possa rapidamente acessá-los em outros pontos do script.
O Gerenciador de Conexão contem toda a mágica do AJAX no YUI, e seguindo a linha das outras bibliotecas, escolhe não fazer exame de uma aproximação alto-nível. Não faz nada mais do que fornecer uma relação cross browser ao XMLHttpRequest:
YAHOO.util.Connect.asyncRequest( 'GET', 'http://www.yahoo.com', callback );
Um destaque é a rica interface callback, que permite que você defina um objeto que envolva suas funções callback com alguma configuração extra. Veja um exemplo de objeto callback:
var callback = {
success: function(resp) { alert('WOO!!'); }, // called on success
failure: function(resp) { alert('BOO!'); }, // called on error
argument: arguments, // user defined arguments
scope: formController // scope the callbacks are called within
}
Prós e contras
A documentação fornecida pelo Yahoo! para a biblioteca é excelente. O site tem a documentação formal da API, vários exemplos, uma lista de discussão e algumas explicações breves das características principais de cada parte da biblioteca. O melhor lugar para verificar para ver se há artigos sobre YUI é no site de Dustin Diaz, desenvolvedor do Yahoo!.
Como eu citei acima, a implementação do controle de eventos é um dos atrativos do YUI. Entretanto, o restante da biblioteca, ao ser muito funcional, não contem tantas características inovadoras como no Mochikit, Dojo e Prototype, e por causa dos longos nomes de pacotes, desenvolver com o YUI se torna, às vezes, uma tarefa longa.
Contudo a lista crescente dos componentes é muito rica. Por exemplo, o componente de calendário (Calendar) suporta diversas línguas e múltiplas seleções da data, e as classes do Container dão-lhe o poder de implementar todos os tipos interface com janelas. Um ponto ruim de usar estes componentes é que tendem a ser muito dependente de outras bibliotecas; neste discurso, Dean Edwards destaca como exemplo o controle do treeview, que se usa em torno de 260 Kb do Javascript.
Conclusão: Qual a melhor?
Bem, uma resposta curta a esta pergunta é que não há nenhuma solução pronta que preencha todas as situações.
A biblioteca Prototype é a que possui uma documentação mais detalhada. É também a biblioteca mais difundida neste momento. Naturalmente, caminha para ser a escolha natural dos desenvolvedores Ruby porque abstrai várias características do Ruby on Rails. Outra coisa importante sobre o Prototype é que tem um peso dos Rails por trás e, em conseqüência, há muitos desenvolvedores que fornecem reparos e remendos do erro ao Prototype. Finalmente, oferece uma riqueza de bibliotecas adicionais tais como scriptaculous, Rico, e Behaviour que o faz uma boa e sólida escolha para muitos desenvolvedores.
Por outro lado, o Prototype tem um framework de tratamento de eventos em-desenvolvimento, que é o problema principal para uma biblioteca tão poderosa. Também – e esta é exclusivamente uma questão de gosto – a aproximação pragmática do Prototype às coisas (como o uso excessivo da propriedade do innerHTML) pode parecer um pouco “suja” às vezes.
Para projetos menores, a forma que foi projetada e seus componentes, fazem do YUI um grande atrativo. É muito fácil de excluir um Gerenciador de Conexão ou a biblioteca de Eventos e começar fazendo algumas tarefas básicas sem ter que atravessar uma curva de aprendizagem demasiada. No geral, contudo, não tem muito a oferecer nos termos de características poderosas.
O Dojo é definitivamente destaque deste grupo. E o foco do Dojo no desempenho é um fator absoluto se você estiver planeando uma aplicação com uso intensivo de Javascript. A implementação de widget tem também um potencial enorme para a construção de complexos UIs. Entretanto é realmente grande – ambos nos termos de tamanho de arquivo e do tamanho da API – assim eu não o recomendaria para projetos menores.
Na minha opinião, o Mochikit é muito bem projetado e o melhor dos quatro, e desenvolvedores do Python/Twisted/Nevow acharão sua API muito familiar. Entretanto, sua documentação é escassa em alguns lugares (por exemplo, eu ainda tenho dúvida a respeito de qual versão do Mochikit inserir no script). Também, algumas das técnicas funcionais que usa podem ser confusas para os novatos ou aqueles que não tem tanta prática em em técnicas de programação. Entretanto, vale a pena dar olha olhada. As funcionalidades do Mochikit provavelmente surpreenderão você – a função createDOM, as ferramentas da iteração e a arquitetura assíncrona são um trabalho de arte.
Fonte:cirofeitosa
