Como dividir o código JavaScript em vários arquivos e usá-los sem incluí-los via tag de script em HTML?

9

Eu estou fazendo uso de construtores (classes) extensivamente e gostaria que cada construtor ficasse em um arquivo separado (algo como Java). Suponha que eu tenho construtores dizer Class1, Class2, ... Class10 e eu só quero usar Class1 e Class5 Eu preciso usar tags de script para incluir Class1.js e Class2.js na página HTML. Mais tarde, se eu também precisar usar Class3 e Class6, preciso ir novamente à página HTML e adicionar tags de script para elas. A manutenção com essa abordagem é muito ruim.

Existe algo em JavaScript semelhante a incluir diretiva de C? Se não, existe uma maneira de imitar esse comportamento?

    
por Cracker 03.06.2011 в 14:08
fonte

6 respostas

2

Você pode usar o jQuery.getScript:

link

Ou qualquer um dos muitos carregadores de javascript como YUI, JSLoader, etc. Veja a comparação aqui:

link

    
por Milimetric 03.06.2011 / 14:17
fonte
1

Você pode usar algo assim:

jsimport = function(url) {
    var _head = document.getElementsByTagName("head")[0];         
    var _script = document.createElement('script');
    _script.type = 'text/javascript';
    _script.src = url;
    _head.appendChild(_script);
}

use-o no seu código como:

jsimport("example.class.js");

Cuidado para usar isso quando o head já estiver no DOM, senão não funcionará.

    
por aorcsik 03.06.2011 / 14:13
fonte
1

Sim: você pode criar tags script a partir do JavaScript e carregar classes necessárias sob demanda.

Veja aqui algumas soluções: link

Com o uso cuidadoso de atributos id ou uma variável global que contém scripts "já carregados", deve ser possível desenvolver uma estrutura de resolução de dependência para JavaScript como Maven ou OSGi para Java.

    
por Aaron Digulla 03.06.2011 / 14:16
fonte
1

Quando estamos falando de JavaScript, acho melhor incluir um arquivo que inclua tudo o que você precisa, em vez de solicitar um novo arquivo toda vez que precisar de algo que atualmente não tem acesso.

Cada vez que você envia para outro arquivo, o navegador fará muitas coisas. Ele verifica se o arquivo solicitado pode, de fato, ser encontrado enviando um HTTPRequest, e se o navegador já viu isso, ele está em cache e inalterado?

O que você está querendo fazer não está no espírito do JavaScript. Fazer o que você está explicando produzirá tempos de carregamento adicionais e você não poderá fazer nada até que o arquivo tenha sido completamente carregado, o que cria tempos de espera.

Seria melhor usar um arquivo para isso, incluir no final interno da tag </body (que não fará com que o navegador espere até que o script seja feito para carregar a página) e, em seguida, crie uma simples função que será executada quando a página estiver completamente carregada.

Por exemplo:

<html>
     <head></head>
     <body>
          <!-- HTML code here... -->
          <script src="javascript.js"></script>
          <script>
               (function r(f) {
                    /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f()
               })(function() {
                       // When the page has completey loaded
                       alert("DOM has loaded and is ready!");
               });
          </script>
     </body>
</html>
    
por Shaz 03.06.2011 / 14:30
fonte
0

você pode incluir um arquivo js em outro arquivo js fazendo algo parecido com isto no início do seu arquivo js:

 document.write("<script type='text/javascript' src='another.js'></script>");
    
por Ma99uS 03.06.2011 / 14:14
fonte
0

A melhor abordagem na sua situação é o uso de algum tipo de compilador. O maior deles é o Google Closure Compiler. Isso faz parte da Google Closure Libraty, cuja estrutura é semelhante à descrita por você.

    
por bjornd 03.06.2011 / 14:18
fonte