Archive for category CSS

Cabeçalho sob demanda (JS e CSS)

Para tentar otimizar o carregamento das páginas, procuro carregar somente o necessário para a correta exibição e funcionamento da mesma. Para isso, os arquivos para estilização (CSS) e os arquivos para interação com o usuário (JS) devem ser carregados somente quando necessários, ou seja, por demanda. Muitas pessoas colocam todas as funções JS em um único arquivo, fazendo com que o carregamento fique um pouco mais demorado se fosse carregado somente o necessário para aquela página. O mesmo problema acontece com os arquivos CSS quem possuem toda a estilização do site em um único arquivo.

Com base nisso criei um plugin para o ZF que faz o carregamento dos arquivos sob demanda. Este plugin nada mais faz do que carregar os arquivos do módulo, controller, action (nesta ordem) no cabeçalho da página.

Para o correto funcionamento do plugin, é preciso que uma estrutura de pastas seja respeitada:

head-sob-demanda

  • [moduleName] – Nome do modulo corrente;
  • [scriptPathName] – Nome da pasta de scripts JS. Por padrão, é adotado o nome ’scripts’;
  • [controllerName] – Nome do controller corrente;
  • [actionName] – Nome do action corrente;
  • [scriptControllerName] – nome do script JS que será chamado a nível de controller. Por padrão, é adotado ‘controller’;
  • [stylePathName] – Nome da pasta de estilos CSS. Por padrão, é adotado o nome ’styles’;
  • [styleControllerName] – nome do estilo CSS que será chamado a nível de controller. Por padrão, é adotado ‘controller’;

O plugin irá tentar incluir todos estes arquivos no head somente se o arquivo existir.

O plugin deve ser registrado pelo objeto Zend_Controller_Front e o objeto de visualização (Zend_View_Interface) já deve estar previamente configurado para o correto funcionamento. O namespace Tavs_View_Helper deve ser adicionado através do método Zend_View::addHelperPath() para que o plugin acesse o helper Tavs_View_Helper_BaseUrl, responsável por incluir o baseUrl ao início do nome do arquivo.

Outra funcionalidade deste plugin é adicionar ao cabeçalho, códigos JS úteis para o javascript. Como o próprio baseUrl, ID da sessão e outros paths do sistema que só podem ser definidos pelo PHP.

O plugin Tavs_Controller_Plugin_View pode ser baixado juntamente com a minha biblioteca de códigos Tavs em http://tavslibary.googlecode.com/svn/trunk.

, , , , ,

3 Comments