John Resig Bear Bibeault

John Resig Bear Bibeault Tradução Rafael Zanolli Novatec

Original English language edition published by Manning Publications Co., Sound View CT.#3B, Greenwich, CT 06830 USA. Copyright 2009 by Manning Publications. Portuguese-language edition for Brazil copyright 2013 by Novatec Editora. All rights reserved. Edição original em inglês publicada pela Manning Publications Co., Sound View CT.#3B, Greenwich, CT 06830 USA. Copyright 2010 pela Manning Publications. Edição em português para o Brasil copyright 2013 pela Novatec Editora. Todos os direitos reservados. Novatec Editora Ltda. 2013. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. Editor: Rubens Prates Tradução: Rafael Zanolli Revisão gramatical: Lívia Freitag Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-328-4 Histórico de impressões: Abril/2013 Primeira edição Novatec Editora Ltda. Rua Luís Antônio dos Santos 110 02460-000 São Paulo, SP Brasil Tel.: +55 11 2959-6529 Fax: +55 11 2950-8869 Email: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec Dados Internacionais de Catalogação na Publicação (CIP) (Câmara Brasileira do Livro, SP, Brasil) Resig, John Segredos do ninja JavaScript / John Resig, Bear Bibeault ; tradução Rafael Zanolli. -- São Paulo : Novatec Editora, 2013. Título original: Secrets of the JavaScript ninja. ISBN 978-85-7522-328-4 1. JavaScript (Linguagem de programação para computadores) I. Bibeault, Bear. II. Título. 13-02818 CDD-005.133 Índices para catálogo sistemático: 1. JavaScript : Linguagem de programação : Computadores : Processamento de dados 005.133 VC20130418

capítulo 1 Surge o ninja Este capítulo apresenta: uma análise do propósito e da estrutura deste livro; as bibliotecas que analisaremos; o que é programação JavaScript avançada ; autoria cross-browser; exemplos de conjuntos de teste. Se você está lendo este livro, sabe que não há nada de simples na criação de códigos JavaScript eficientes e cross-browser. Além dos desafios normais da elaboração de códigos eficazes, temos a complexidade adicional do tratamento de diferenças e complexidades obtusas de navegadores. Para lidar com esses desafios, desenvolvedores JavaScript frequentemente capturam conjuntos de funcionalidades comuns e reutilizáveis na forma de bibliotecas JavaScript. Essas bibliotecas variam amplamente em abordagem, conteúdo e complexidade, mas uma constante permanece: elas devem ser fáceis de utilizar, implicar a menor quantidade de sobrecarga e ser capazes de funcionar em todos os navegadores que almejamos. É compreensível, então, que o entendimento de como as melhores bibliotecas JavaScript são construídas possa nos fornecer ótimos insights referentes à forma como nosso próprio código pode ser construído para atingir esses mesmos objetivos. Este livro irá prepará-lo para descobrir as técnicas e os segredos utilizados por essas bases de código de destaque e aproveitar tudo isso em um único recurso. Neste livro analisaremos as técnicas que foram (e continuam sendo) utilizadas para criar as bibliotecas JavaScript mais populares. Vamos conhecer essas bibliotecas! 26

Capítulo 1 Surge o ninja 1.1 Bibliotecas JavaScript que vamos utilizar As técnicas e práticas utilizadas para criar bibliotecas JavaScript modernas serão o foco de nossa atenção neste livro. A principal biblioteca que vamos analisar é, evidentemente, a jquery, a qual atingiu notoriedade como a biblioteca JavaScript mais onipresente em uso atualmente. A jquery (http://jquery.com) foi criada por John Resig e lançada em janeiro de 2006. Ela popularizou o uso de seletores CSS para correspondência de conteúdo do DOM (Document Object Model). Dentre suas muitas capacidades, ela fornece manipulação do DOM, Ajax, tratamento de eventos e funcionalidade de animação. Essa biblioteca veio para dominar o mercado de bibliotecas JavaScript, sendo utilizada em centenas de milhares de sites e interagindo com milhões de usuários. Por meio de uso e feedback consideráveis, essa biblioteca foi aprimorada ao longo dos anos e continua a evoluir, tornando-se a base de código ideal que é hoje. Além de analisar o código de exemplo da jquery, vamos também verificar as técnicas utilizadas pelas seguintes bibliotecas: Prototype (http://prototypejs.org/) A principal dentre as bibliotecas JavaScript modernas, criada por Sam Stephenson e lançada em 2005. Essa biblioteca incorpora DOM, Ajax e funcionalidade de eventos, além de técnicas de programação funcional orientada a objetos e a aspectos. Yahoo! UI (http://developer.yahoo.com/yui) Resultado do desenvolvimento interno do framework JavaScript no Yahoo! e lançada ao público em fevereiro de 2006. A Yahoo! UI (YUI) inclui capacidades de DOM, Ajax, eventos e animação, além de vários widgets pré-construídos (de calendário, grade, expansíveis e outros). base2 (http://code.google.com/p/base2) Criada por Dean Edwards e lançada em março de 2007. Essa biblioteca suporta funcionalidades de DOM e de eventos. Seu maior apelo é que ela tenta implementar as várias especificações W3C de uma maneira universal e cross-browser. Todas essas bibliotecas são bem construídas e lidam com as questões a que se propõem de forma detalhada. Por essas razões, elas servirão como uma boa base para análises adicionais, e a compreensão da construção fundamental dessas bases de código nos dará insights quanto ao processo da construção de bibliotecas JavaScript de classe mundial. Mas essas técnicas não são úteis apenas para a construção de grandes bibliotecas; elas podem ser aplicadas a todos os códigos JavaScript, independentemente do tamanho. 27

28 Segredos do Ninja JavaScript A composição de uma biblioteca JavaScript pode ser resumida em três aspectos: uso avançado da linguagem JavaScript; construção meticulosa de código cross-browser; uso das melhores práticas atuais que reúnem todos os elementos. Analisaremos cuidadosamente esses três aspectos em cada uma das bibliotecas para coletar uma base de conhecimento completa que possamos utilizar para criar nosso próprio código JavaScript eficiente. 1.2 Compreendendo a linguagem JavaScript Muitos codificadores JavaScript, conforme avançam em suas carreiras, podem chegar ao ponto de utilizar ativamente a ampla gama de elementos que compõem a linguagem, incluindo objetos, funções e (se estiverem prestando atenção às tendências de codificação) até mesmo funções embutidas anônimas. Em muitos casos, no entanto, suas habilidades não podem ser levadas além de seus níveis fundamentais. Além disso, geralmente há um entendimento muito fraco do propósito e da implementação de closures em JavaScript, o que demonstra, fundamental e definitivamente, a importância de funções para a linguagem. O JavaScript consiste de um relacionamento próximo entre objetos, funções e closures (veja a figura 1.1). A compreensão da forte relação entre esses três conceitos pode melhorar amplamente nossa capacidade de programação JavaScript, dando- -nos uma estrutura sólida para qualquer tipo de desenvolvimento de aplicação. OBJETOS CLOSURES FUNÇÕES Figura 1.1 JavaScript consiste de um relacionamento próximo entre objetos, funções e closures. Muitos desenvolvedores JavaScript, especialmente aqueles que vêm de uma experiência orientada a objetos, podem prestar muita atenção a objetos, mas à custa do entendimento da forma como funções e closures contribuem ao panorama maior. Além desses conceitos fundamentais, há duas funcionalidades em JavaScript que são terrivelmente subutilizadas: temporizadores (timers) e expressões regulares. Esses dois conceitos têm aplicação em praticamente qualquer base de código

Capítulo 1 Surge o ninja 29 JavaScript, mas nem sempre são utilizados em seu pleno potencial por não serem bem compreendidos. Um bom entendimento da forma como temporizadores operam dentro do navegador, o que frequentemente é um mistério, fornece-nos a capacidade de enfrentar tarefas de codificação complexas como computações de longa duração e animações suaves. E uma compreensão sólida da forma como expressões regulares funcionam permite-nos simplificar o que do contrário seriam fragmentos de código bastante complicados. Como outro ponto de destaque para nosso estudo avançado da linguagem JavaScript, veremos a instrução with, no capítulo 10, e o polêmico método eval(), no capítulo 9 duas funcionalidades importantes, mas controversas, que foram banalizadas, malutilizadas e até mesmo condenadas por muitos programadores JavaScript. Nota: aqueles que vêm acompanhando as repercussões no mundo do desenvolvimento web saberão que ambos esses tópicos são controversos e que se tornarão ou obsoletos ou limitados em versões futuras do JavaScript. Mas como você provavelmente encontrará esses conceitos em códigos existentes, é importante compreendê-los, ainda que não planeje utilizá-los em códigos futuros. Analisando o trabalho de alguns dos melhores codificadores JavaScript, veremos que, quando utilizadas apropriadamente, funcionalidades avançadas da linguagem permitem a criação de alguns fragmentos fantásticos de código que seriam impossíveis sem elas. Em grande parte, essas funcionalidades avançadas também podem ser utilizadas para alguns exercícios interessantes de metaprogramação, moldando o JavaScript no que quisermos que ele seja. Aprender a utilizar funcionalidades avançadas da linguagem certamente elevará nosso código a níveis mais altos, e aprimorar nossas habilidades para agrupar esses conceitos e funcionalidades nos dará um nível de entendimento que colocará a criação de qualquer tipo de aplicação JavaScript dentro de nosso alcance. Essa estrutura nos dará uma base sólida para avançarmos, iniciando pela elaboração de códigos consistentes e cross-browser. 1.3 Considerações sobre cross-browser O aperfeiçoamento de nossas habilidades de programação JavaScript poderá nos ajudar muito, especialmente agora que o JavaScript ultrapassou os limites do navegador e está sendo utilizado no servidor com engines JavaScript como Rhino

30 Segredos do Ninja JavaScript e V8 e bibliotecas como Node.js. Mas ao desenvolver aplicações JavaScript com base no navegador (o foco deste livro), mais cedo ou mais tarde vamos nos deparar com os navegadores em si e seus problemas e inconsistências enlouquecedores. Em um mundo perfeito, todos os navegadores estariam livres de bugs e suportariam padrões web de forma consistente, mas todos nós sabemos que com certeza não vivemos nesse mundo. A qualidade dos navegadores melhorou amplamente nos últimos tempos, mas eles ainda têm alguns bugs, APIs faltantes e peculiaridades de navegadores específicos com as quais teremos de lidar. Desenvolver uma estratégia abrangente para o tratamento das questões desses navegadores e tornar-se intimamente familiarizado com suas diferenças e peculiaridades é tão importante, se não mais, quanto a proficiência no JavaScript em si. Ao elaborar aplicações para navegadores, ou bibliotecas JavaScript a serem utilizadas neles, a escolha de quais navegadores suportar é um aspecto importante. Provavelmente gostaríamos de suportar todos os navegadores, mas limitações em recursos de desenvolvimento e testes não permitem isso. Então, como decidimos quais navegadores suportar, e em que nível? Uma abordagem que podemos empregar é uma levemente emprestada de uma abordagem mais antiga do Yahoo! que era chamada de suporte de navegador graduado. Nessa técnica, criamos uma matriz de suporte de navegadores que funciona como uma representação da importância de um navegador e de sua plataforma para nossas necessidades. Em tal tabela, listamos as plataformas-alvo em um eixo e os navegadores no outro. Então, nas células da tabela damos uma graduação (de A a F, ou qualquer outro sistema de graduação que atenda às nossas necessidades) para cada combinação de navegador/plataforma. A tabela 1.1 mostra um exemplo hipotético de tal tabela. Tabela 1.1 Matriz de suporte de navegadores hipotética Windows OS X Linux ios Android IE 6 N/A N/A N/A N/A IE 7, 8 N/A N/A N/A N/A IE 9 N/A N/A N/A N/A Firefox N/A Chrome Safari N/A N/A Opera

Capítulo 1 Surge o ninja 31 Note que não preenchemos nenhuma graduação. As graduações que você vai atribuir a uma combinação específica de plataforma e navegador são inteiramente dependentes das necessidades e dos requisitos de seu projeto, assim como de outros fatores importantes, como a composição do público-alvo. Podemos utilizar essa abordagem para formular graduações que meçam quão importante é o suporte para a(o) plataforma/navegador, e combinar essa informação com o custo desse suporte para tentar formular o conjunto ideal de navegadores suportados. Exploraremos isso mais detalhadamente no capítulo 11. Uma vez que não é prático desenvolver para um grande número de combinações de plataforma/navegador, devemos pesar os custos versus os benefícios do suporte para os vários navegadores. Uma análise desse tipo precisa fazer várias considerações, as principais sendo: as expectativas e necessidades do público-alvo; a participação de mercado do navegador; a quantidade de esforço necessária para suportar o navegador. O primeiro item é subjetivo e apenas seu projeto pode determiná-lo. A participação de mercado, por outro lado, frequentemente pode ser medida utilizando informações disponíveis. E uma estimativa aproximada do esforço envolvido no suporte de cada navegador pode ser determinada pela consideração das capacidades dos navegadores e de sua adequação a padrões modernos. A figura 1.2 mostra um quadro de exemplo que representa informações sobre a utilização de navegadores (obtidas a partir do StatCounter para agosto de 2012) e nossas opiniões pessoais quanto ao custo de desenvolvimento para os principais navegadores desktop. IE 6 IE 7,8 IE 9 Firefox Safari Chrome Opera Benefício (participação de mercado) Custo (desenvolvimento e testes) Figura 1.2 Analisar o custo versus o benefício do suporte de vários navegadores desktop indica a que devemos dedicar nossos esforços.

32 Segredos do Ninja JavaScript Comparar graficamente o benefício com o custo mostra imediatamente onde podemos dedicar nosso esforço para obter o maior retorno. Aqui estão alguns detalhes destacáveis nesse gráfico: Ainda que exija relativamente muito mais esforço suportar o Internet Explorer 7 e 8 do que os navegadores que obedecem aos padrões, eles ainda têm uma grande participação de mercado, o que faz com que o esforço extra valha a pena se esses usuários fizerem parte do nosso público-alvo. O IE 9, tendo feito grandes avanços no sentido de adequação aos padrões, é mais fácil de suportar do que versões anteriores do IE, e já está ganhando terreno em participação de mercado. A escolha de suporte ao Firefox e ao Chrome é óbvia, pois eles têm uma grande participação de mercado e são fáceis de suportar. Apesar de o Safari ter uma participação de mercado relativamente baixa, ele ainda merece suporte, já que sua natureza de adequação aos padrões torna seu custo baixo. (Como regra prática, se algo funcionar no Chrome, provavelmente funcionará no Safari não obstante casos patológicos.) O Opera, ainda que não demande mais esforço do que o Safari, pode ficar de fora no desktop em razão de sua minúscula participação de mercado. Mas se as plataformas móveis forem importantes para você, o Opera móvel será um participante mais importante; veja a figura 1.3. Nada realmente tem de ser dito quanto ao IE 6. (Veja www.ie6countdown.com.) Tudo muda muito drasticamente quando analisamos o panorama móvel, conforme mostra a figura 1.3. Opera Android Safari Nokia Blackberry Benefício (participação de mercado) Custo (desenvolvimento e testes) Figura 1.3 O panorama móvel, em que custos de desenvolvimento são razoavelmente uniformes, se resume a estatísticas de uso.

Capítulo 1 Surge o ninja 33 Evidentemente, nada é nunca tão óbvio. Pode ser seguro dizer que o benefício é mais importante do que o custo, mas, em última análise, tudo se resume às escolhas daqueles que fazem parte do processo de tomada de decisão, considerando fatores como as necessidades do mercado e outras considerações de negócio. Mas a quantificação dos custos versus os benefícios é um bom ponto de partida para a tomada dessas importantes decisões de suporte. Da mesma forma, esteja ciente de que o panorama muda rapidamente. Manter-se atualizado em sites como http://gs.statcounter.com é uma sábia precaução. Outro fator possível para organizações com limitações de recursos é a capacidade da equipe de desenvolvimento. Ainda que a principal razão para o desenvolvimento de uma aplicação seja seu uso por usuários finais, desenvolvedores podem ter de aprimorar as habilidades necessárias para desenvolver a aplicação e atender às necessidades desses usuários. Tais considerações devem ser consideradas durante a fase de análise de custo. O custo de desenvolvimento cross-browser pode depender significativamente da habilidade e da experiência dos desenvolvedores e este livro pretende impulsionar esse nível de habilidade, por isso vamos seguir em frente e analisar as melhores práticas atuais. 1.4 Melhores práticas atuais Dominar a linguagem JavaScript e ter uma noção de questões de codificação cross- -browser são partes importantes de se tornar um especialista no desenvolvimento de aplicações, mas não representam tudo. Para atingir os níveis mais elevados, você também precisa apresentar os traços que inúmeros desenvolvedores anteriores provaram ser benéficos para o desenvolvimento de códigos de qualidade. Esses traços, que analisaremos mais detalhadamente no capítulo 2, são conhecidos como as melhores práticas, e, além do domínio da linguagem, incluem elementos tais como: realização de testes; análise de desempenho; habilidades de depuração. É de importância vital aderir a essas práticas em sua codificação e fazê-lo com frequência; a complexidade do desenvolvimento cross-browser certamente justifica isso. Vamos analisar algumas dessas práticas.

34 Segredos do Ninja JavaScript 1.4.1 Melhor prática atual: realização de testes Ao longo deste livro, vamos aplicar várias técnicas de teste que visam garantir que nossos exemplos de código operem de acordo com o pretendido, além de servir de exemplo de como testar códigos gerais. A principal ferramenta que utilizaremos para testes é a função assert(), cujo propósito é declarar se uma premissa é verdadeira ou falsa. A forma geral dessa função é assert(condition, message); na qual o primeiro parâmetro é uma condição que deve ser verdadeira e o segundo é uma mensagem que será apresentada se ela não o for. Considere isto, por exemplo: assert(a == 1, "Disaster! a is not 1!"); Se o valor da variável a não for igual a 1, a asserção falha, e uma mensagem exageradamente dramática será apresentada. Note que a função assert() não é uma funcionalidade inata da linguagem (algumas linguagens, como Java, fornecem tais capacidades), por isso nós mesmos vamos implementá-la. Discutiremos sua implementação e seu uso no capítulo 2. 1.4.2 Melhor prática atual: análise de desempenho Outra prática importante é a análise de desempenho. Os engines JavaScript dos navegadores vêm fazendo grande progresso no desempenho do JavaScript em si, mas isso não é desculpa para escrevermos códigos JavaScript desleixados e ineficientes. Mais adiante neste livro, utilizaremos códigos como o que vemos a seguir para coletar informações de desempenho: start = new Date().getTime(); for (var n = 0; n < maxcount; n++) { /* realiza a operação a ser medida */ } elapsed = new Date().getTime() - start; assert(true,"measured time: " + elapsed); Aqui, encapsulamos a execução do código a ser medido com a coleção de carimbos de data e hora (timestamps): um antes de executarmos o código e outro depois. A diferença entre eles nos diz quanto tempo o código demorou para ser executado, informação que podemos comparar com as alternativas de código, as quais medimos utilizando a mesma técnica.

Capítulo 1 Surge o ninja 35 Note como o código é efetuado várias vezes; nesse exemplo, efetuamos o código pelo número de vezes representado por maxcount. Uma vez que uma operação individual de código ocorre muito rapidamente para que seja medida de forma confiável, precisamos efetuar o código várias vezes para obtermos um valor mensurável. Frequentemente, essa contagem pode atingir as dezenas de milhares, ou até os milhões, dependendo da natureza do código a ser medido. Um pouco de tentativa e erro permite-nos escolher um valor razoável. Essas técnicas de melhores práticas, assim como outras que aprenderemos ao longo do caminho, vão melhorar muito nosso desenvolvimento JavaScript. O desenvolvimento de aplicações com os recursos restritos que um navegador fornece, acoplado ao mundo cada vez mais complexo da capacidade e da compatibilidade dos navegadores, faz com que ter um conjunto robusto e completo de habilidades seja uma necessidade. 1.5 Resumo Aqui está um resumo do que aprendemos neste capítulo: O desenvolvimento de aplicações web cross-browser é difícil, mais difícil do que pensaria a maioria das pessoas. Para conseguirmos isso, devemos não apenas dominar a linguagem JavaScript, mas também ter um conhecimento completo sobre os navegadores, assim como de suas peculiaridades e inconsistências. É importante ainda ter uma boa base das melhores práticas atuais padronizadas. Ainda que o desenvolvimento JavaScript certamente possa ser desafiador, existem aquelas almas corajosas que já seguiram essa rota tortuosa: os desenvolvedores das bibliotecas JavaScript. Vamos analisar o conhecimento demonstrado na construção dessas bases de código, efetivamente fomentando nossas habilidades de desenvolvimento e elevando-as a um nível de primeira classe. Essa exploração com certeza será informativa e educacional vamos aproveitar essa jornada!