jQuery Design Patterns

Esse artigo explora os principais padrões de projeto relacionados ao desenvolvimento de software usando jQuery, assim como os que o framework usa como principal dentro do seu próprio núcleo.

Fique por dentro
Neste artigo vamos introduzir o Composite Pattern e veremos como esse padrão é usado pelo jQuery. Analisaremos os ganhos oferecidos pelo jQuery com manipulações simples de JavaScript no DOM, além de usarmos o Iterator Pattern em um aplicativo de exemplo para que o leitor consiga assimilar não somente a base dos referidos padrões, mas também entender a melhor hora e lugar para aplicá-los, discriminando as principais diferenças entre os padrões de projeto mais comumente usados pela comunidade de desenvolvimento como um todo.

Até a era da Web 2.0 começar, a web era apenas um pequeno mundo de mídias baseadas em documentos e tudo que ela oferecia eram interligações entre diferentes páginas/documentos e scripts do lado cliente, sendo o mesmo limitado no quesito validação.

Em 2005, aplicações como Gmail e o Google Maps foram lançadas e o JavaScript mostrou ser uma linguagem utilizada por grandes empresas para criar aplicações em larga escala e fornecer interações ricas em interface de usuário.

Mesmo que o JavaScript tenha tido poucas alterações desde o seu lançamento, houve uma enorme mudança nas expectativas que o mundo empresarial tinha sobre o que as páginas web seriam capazes de fazer. Desde então, os desenvolvedores web foram obrigados a entregar interações de usuário cada vez mais complexas e, por fim, o termo “aplicação web” apareceu no mercado.

Como resultado, começou a se tornar óbvio que eles devem criar algumas abstrações de código, definir algumas das melhores práticas e adotar todos os Design Patterns aplicáveis que a ciência da computação tem a oferecer. A ampla adoção do JavaScript para aplicações de nível empresarial ajudou na evolução da linguagem, que com o ECMAScript2015/ECMAScript6 (ES6) teve sua especificação expandida de uma forma que permitiu que ainda mais padrões de projeto fossem facilmente utilizados.

Desde o seu lançamento, a biblioteca jQuery tem sido uma parte integrante do kit de ferramentas de um desenvolvedor web. O jQuery utiliza diversos Design Patterns em seu núcleo e solicita ao desenvolvedor que seu uso seja facilitado através dos métodos que ela oferece. O Composite Pattern, por exemplo, é um desses padrões e está exposto ao programador através do próprio núcleo do jQuery.

jQuery e DOM Scripting

Por DOM Scripting nos referimos a qualquer procedimento que altera ou manipula os elementos de uma página web após o seu carregamento pelo navegador. A API DOM é uma API JavaScript que oferece aos desenvolvedores web uma coleção de métodos que permitem a manipulação dos elementos da árvore DOM que o navegador cria após carregar e analisar o código HTML. Ao utilizar essa API em seu código, você poderá manipular os nós do DOM e adicionar ou remover novos elementos existentes na página.

O caso de uso primário do DOM scripting foi inicialmente limitado à validação de formulários, com implementações cada vez mais complexas no que se refere às interações dos usuários, e tornou-se um dos seus principais objetivos fornecer abstrações que resultem em códigos mais curtos, de leitura mais fácil, que garantam, ao mesmo tempo, a interoperabilidade entre navegadores propensos a erros.

Manipulando o DOM usando o jQuery

Para recordar sobre o jQuery, veremos uma página de exemplo, que faz algumas manipulações DOM simples. Na Listagem 1, vamos carregar uma página simples estruturada inicialmente com o que se parece a Figura 1. Para tanto, crie num diretório de sua preferência um arquivo de nome index.html e adicione ao mesmo o referido conteúdo.

Perceba que estamos criando um conjunto de divs com textos apenas para que possamos visualizar a forma como o jQuery manipula elementos visualmente simples. No início e fim do arquivo temos duas importações: do arquivo manipulacao-dom.css, que conterá os estilos da nossa página, e do arquivo jquery-manipulacao-dom.js, que guardará os códigos JavaScript do jQuery subsequentemente. Portanto, trate de criá-los também no mesmo diretório.

Perceba, finalmente, que estamos importando a versão 2.2.4 do jQuery minificada, isto é, comprimida para facilitar seu uso no navegador final. Isso evita que tenhamos de baixar o arquivo fisicamente no projeto para usá-lo.

Listagem 1. Código HTML da index.html.

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>Manipulações do DOM</title> <link rel="stylesheet" type="text/css" href="manipulacao-dom.css"> </head> <body> <h1 id="cabecalho">Manipulações do DOM</h1> <div class="container"> <div> <p class="quadro"> Fazer Manipulações do DOM é fácil com o JS! </p> </div> <div> <p class="quadro"> Fazer Manipulações do DOM é fácil com o JS! </p> </div> <div> <p class="quadro"> Fazer Manipulações do DOM é fácil com o JS! </p> </div> </div> <p class="quadro"> Fazer Manipulações do DOM é fácil com o JS! </p> <p class="quadro"> Fazer Manipulações do DOM é fácil com o JS! </p> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="jquery-manipulacao-dom.js"></script> </html>

Figura 1. Página index.html com conteúdo inicial.

Na Listagem 2, a fim de alterar o conteúdo e o layout da página, bem como tornar seus efeitos claramente visíveis, temos um código CSS que contém apenas três classes CSS. Veja que no momento estamos apenas utilizando a primeira classe, uma vez que as demais servirão para o efeito a ser aplicado pelo JavaScript no código posterior.

" [...] continue lendo...

Artigos relacionados