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.

, , , , ,

  1. #1 by rafaelxy at August 13th, 2009

    Curti, mas achei mais doido é o tavslibrary, não sabia que vc deixava o codigo aberto. Acho massa a iniciativa =)

  2. #2 by Tales at August 13th, 2009

    Fala Rafa,

    isso mesmo cara…Essa é a idéia mesmo, visto que é uma iniciativa onde todo mundo pode participar. O código sendo aberto fica mais
    fácil de o pessoal entender melhor a library.

    Flw.

  3. #3 by Gustavo at October 15th, 2009

    Muito massa! Parabéns! =)

    Seria legal um pequeno tutorial de como instalar o plugin no ZF, pois to apanhando pakas aki =/

    Comecei com ZF agora e te agradeceria muito se me desse algumas dicas de como instalar esse plugin =]

    Abraço =)

(will not be published)
  1. No trackbacks yet.