Sim, é isso mesmo que você leu! O Dreamweaver exporta seus comandos de JavaScript, criados através do painel Behaviors (assunto para outro post) de uma forma muito simples. Veja abaixo:
As imagens acima demonstram o uso do JavaScript do Dreamweaver. No exemplo acima, um código gerado para o manuseio da visibilidade de elementos (Show/Hide Elements).
A questão é que, por padrão, o código JavaScript do Dreamweaver é gerado no próprio <head></head>, e se formos aprofundar o pensamento, ao duplicar as páginas via Templates ou includes (ou mesmo qualquer outra técnica), esse código será replicado para cada página, tornando as páginas mais pesadas e a manutenção mais complicada por “bobeira”.
O comando em foco na imagem abaixo resolve o problema:
Esse comando é extremamente útil, e ainda por cima te dá duas opções de sequência: exportação de forma simples (arquivo .js apenas) e forma não-obstrutiva (arquivo .js e retirada de todo e qualquer evento aplicado em tags HTML no decorrer do arquivo). Veja as imagens abaixo e seus resultados:
Exportação de JavaScript apenas do <head> (opção 1)
Pela imagem acima nota-se que o Dreamweaver retirou o código JavaScript do <head> e colocou-o em um arquivo .js, que é exportado para o mesmo local do HTML, por padrão. A chamada ao arquivo é inserida, como observado na figura acima.
Exportação total do JavaScript (JavaScript não Intrusivo / Obstrutivo)
Perceba que o Dreamweaver solicita a edição de IDs nos links e/ou objetos que utilizam JavaScript em seu arquivo. É um passo extremamente importante, pois é através do ID do objeto que o Dreamweaver viabilizará a utilização do JavaScript de maneira não intrusiva (ou obstrutiva, como alguns também chamam o método).
O resultado da operação será a geração de arquivos externos, conforme as figuras abaixo:
(Caso você não tenha o diretório SpryAssets, ao salvar o arquivo o Dreamweaver solicitará a criação do mesmo.)
A maior vantagem com relação a código limpo, obviamente está na segunda opção. Porém, não podemos nos esquecer que o Dreamweaver usará o framework Spry para a conclusão do processo, e como exibido na imagem acima, o arquivo gerado no diretório SpryAssets não é lá muito pequeno…
Veja abaixo um trecho desse arquivo, para que você entenda o que acontece:
(Chamada do Spry diretamente no arquivo .js gerado)
(Resultado final do HTML, com o link também para o arquivo SpryDOMUtils.js, bem como os IDs inseridos no código HTML)
A manipulação dos eventos ocorre totalmente fora do HTML. Porém, a sua manutenção também, no caso de, por exemplo, a inserção de mais algum elemento que precise da manipulação do Javascript. O Dreamweaver não será mais capaz de manipular o JavaScript criado por ele via painel Behaviors. Porém, o seu código estará mais limpo. Aà é questão de colocar na balança o que vale mais: um código alterável pelo Dreamweaver ou um resultado mais limpo?
É isso aÃ! Espero ter ajudado quem enfrenta esse problema no Dreamweaver.
Abraços!
