3

Eu estava pensando em algo para a chamada de plugins JQuery, gostaria de chamar todos os plugins em uma única página, mas carregando-os apenas se eles forem usados.

Por exemplo:

Na página X eu uso o DataTables, então:

if($(".dataTable") != undefined){ //se a página usar o dataTable

    if($.dataTable == undefined){ //e se ele não foi carregado

        //carregaria os arquivos necessários
        $.getScript("dataTable.min.js", function(){
            $(".dataTable").dataTable(); //e então incluiria a chamada
        });

    }

}

Isso seria feito para todos os plugins usados em todo o sistema. Dessa forma, só seriam carregados os plugins usados na página, e não precisaria estar incluindo os arquivos e a chamada página por página.

As minhas dúvidas são:

  • Isso seria viável?
  • Há alguma forma de fazer algo parecido?

A linguagem utilizada é PHP.

É que na verdade estou utilizando o seguinte Dashboard: http://demo.kimlabs.com/gentelella/production/, ele fornece vários plugins interessantes, gostaria de deixar a chamada de todos eles disponíveis mas isso ficaria MUITO pesado para o carregamento, e carregá-los apenas nas páginas em que fossem usados seria um trabalhão (além de ser horrível para manutenção).

3
  • Carregar enquanto é executado o Javascript seria muito lento (inviável). Não existe um bom modelo a ser seguido e como desenvolvedor web creio que esse é alguns dos dilemas do desenvolvimento em HTML. Coloque na pergunta sua estrutura de arquivos e chamadas de páginas, linguagem e etc. Assim posso ajudar com algumas ideias que tenho sobre o assunto.
    – KaduAmaral
    18/09/2015 às 20:46
  • Deixei mais informações ao final da pergunta, desde já, obrigado.
    – Mukotoshi
    18/09/2015 às 20:48
  • @Mukotoshi acho que seria legal você trocar o titulo para "Carregamento de bibliotecas JavaScript sob demanda".. só uma sugestão :D
    – Brunno
    19/09/2015 às 14:45

1 Resposta 1

3

Quando você vai usar muito código JavaScript em uma unica pagina, é importante pensar na performance de sua aplicação, além disso para que sua aplicação esteja preparada para crescer é interessante seus códigos estarem organizados.

É ai que começam as duvidas!

Crio vários arquivos e vou chamando ao relento, sem me preocupar com a quantidade de requisição?

Coloco todos meus códigos em apenas um arquivo e faço a minificação do mesmo ?

A resposta para as perguntas acima é; Depende da necessidade do seu app!

E como você ira saber qual sua necessidade? Terá de fazer testes de performance :´(

Se seu caso for o de ter a necessidade de modularizar a aplicação, proponho a você a utilização do RequireJS. Com ele você ira carregar e parsear seus arquivos JavaScript e CSS em background.

O RequireJS usa uma estrutura modular com Injeção de Dependência, para que os módulos necessários sejam carregados de forma assíncrona e sob demanda! Fazendo o que você solicitou acima. Muito legal neh?? :D

Você pode encontrar o RequireJS aqui, sua documentação aqui e um tutorial/apresentação em português aqui.

Obs: Existem varias outras API's que fazem quase a mesma coisa que o RequireJS, indiquei o mesmo pois utilizo em meus projetos :

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .