Artigos HTML e CSS jQuery Design Patterns
Por que eu devo ler este artigo: 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.

Listagem 2. Alterando a página com o CSS

.quadro {
      padding: 7px 10px;
      border: solid 1px #fff;
      margin: 5px 3px;
      box-shadow: 0 1px 2px #000;
  }
  .equalizador {
      float: left;
      width: 33.33%;
  }
  .clear {
      clear: both;
  }

Os códigos anteriores resultam na nossa primeira figura, quando executados em um navegador. No código CSS, primeiro definimos alguns estilos básicos para o qu ...

Quer ler esse conteúdo completo? Tenha acesso completo