Boa estrutura de JavaScript em um projeto?

Question

Então, já terminei com o JS no meu site agora. Envolve jQuery (e, como tal.

Tudo isso está atualmente em 1 .js, funções, inits, iterações, tudo isso. É uma estrutura bem e tudo mais, tudo é feito corretamente.

Minha pergunta é, no entanto: o que é uma boa estrutura? Devo colocar a metade superior em um arquivo e o mais baixo em outro? Ou devo colocar todas as inicializações necessárias no .ready () e colocar todas as funções em outro arquivo? Ou devo manter tudo em um arquivo sempre em crescimento?

Answer 1

Do ponto de vista do desempenho, fornecer todo o seu JS em um único arquivo para o navegador, conforme sugerido pelas outras respostas, é sensato. No entanto, ter seu código construído dessa maneira não é, cada "classe" deve estar em um arquivo separado, dividindo as coisas em entidades e um arquivo de controle ou dois para lidar com as chamadas da página real - o mesmo que em qualquer outro idioma. Eles podem ser combinados em um arquivo para suprimentos com antecedência ou dinamicamente - de preferência também minimizados.

Answer 2

Manter as chamadas de script para um mínimo melhora o tempo de processamento-cada script inclui uma viagem de ida e volta que adiciona tempo. Então - preferência pessoal, desde que você não se importe com os tempos de carregamento da página.

Yahoo's Melhores práticas para acelerar seu site começa com Minimize solicitações HTTP:

80% do tempo de resposta do usuário final é gasto no front-end. A maioria desse tempo está vinculada ao baixar todos os componentes da página: imagens, folhas de estilo, scripts, flash etc. Reduzir o número de componentes, por sua vez, reduz o número de solicitações HTTP necessárias para renderizar a página. Esta é a chave para páginas mais rápidas.

Uma maneira de reduzir o número de componentes na página é simplificar o design da página. Mas existe uma maneira de construir páginas com conteúdo mais rico, além de alcançar tempos de resposta rápidos? Aqui estão algumas técnicas para reduzir o número de solicitações HTTP, enquanto ainda apoia os designs de página ricos.

Os arquivos combinados são uma maneira de reduzir o número de solicitações HTTP combinando todos os scripts em um único script e combinando de maneira semelhante todos os CSs em uma única folha de estilo. A combinação de arquivos é mais desafiadora quando os scripts e as folhas de estilo variam de página para página, mas fazer essa parte do seu processo de liberação melhora os tempos de resposta.

Answer 3

Pessoalmente, prefiro manter todo o código em um único arquivo, para que o navegador precise buscar apenas um arquivo e não dois/três/quatro/o que for.

Mas acho que cabe à preferência pessoal.