3

Tenho dois arquivos JavaScript.

arquivo1.js

function teste()
{
alert("fui chamado!");
}

No arquivo2.js eu gostaria de ter acesso a função teste() do arquivo1.js sem precisar fazer a referencia dentro do HTML.
Isso é possível?

11
  • Você pode usar um gerenciador de módulos, como RequireJS. Isso vai exigir que você altere o arquivo 1 para que fique compatível.
    – bfavaretto
    2/06/2015 às 21:13
  • Parecida ou duplicada de: pt.stackoverflow.com/q/63389/129 ?
    – Sergio
    2/06/2015 às 21:17
  • Desculpe @Sergio mas o link que você mostrou é uma boa alternativa para quem quer criar uma variável universal por exemplo, mas no meu caso, quero poder controlar qual arquivo terá acesso as funções do outro. 2/06/2015 às 21:19
  • @bfavaretto você teria algum exemplo de uso em português? 2/06/2015 às 21:19
  • 1
    @MarcusVinicius Aliás, é basicamente isso que o RequireJS faz :)
    – bfavaretto
    2/06/2015 às 22:29

2 Respostas 2

4

Você pode fazer o carregamento dinâmico do script, criando uma tag scripte inserindo-a na página. Por exemplo:

Arquivo1.js

function Script1() {
    this.DigaOla = function() {
        alert("Sou do script 1");
    }
};

Arquivo2.js

 function loadScript(url, callback) {    
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = url;    
     script.onreadystatechange = callback;
     script.onload = callback;

     head.appendChild(script);
 }

 $(document).ready(function() {
    loadScript("Arquivo1.js", function() {               
        var s = new Script1();
        s.DigaOla();
    });
 });
6
  • Só existe um problema @MarcusVinicius pois se eu acrescentar algo após o loadScript, como nessa linha a mesma é executada antes da função ser finalizada! Nesse caso, o que fazer? 3/06/2015 às 2:41
  • Não tem muito o que fazer senão colocar todo o código como callback do loadDependency que vc criou. Fiz um fork do seu código, dá uma olhada. 3/06/2015 às 2:51
  • Muito obrigado meu amigo, poderia ter feito uma proposta de alteração para ficar registrado sua autoria. Com o fork infelizmente não consigo manter seus créditos. 3/06/2015 às 3:37
  • Sem problemas, se quiser faco o pull request. 3/06/2015 às 3:38
  • 1
    Tá feito, obrigado por me deixar contribuir. Se precisar de ajuda estou a disposição. 3/06/2015 às 3:46
4

A forma mais simples é incluir o arquivo1 antes do arquivo2 no seu HTML:

<!doctype html>
<html>
<head>
    <script src="arquivo1.js"></script>
    <script src="arquivo2.js"></script>
</head>

Todas as globais definidas no arquivo1 serão visíveis no arquivo2.

Uma maneira um pouco mais limpinha de fazer isso é escrever o arquivo1 de forma que apenas uma global seja exportada:

var LIB = {};

(function(){

   var msg = "fui chamado";

   var funcao_interna(){
       alert("oi");
   }

   LIB.teste = function(){
       alert(msg);
   }

   LIB.teste2 = funcao_interna;
}());

E no arquivo2 você faz

LIB.teste();

Esse (function(){ ... }()) é uma "função imediatamente invocada" e é um truque que se usa em Javascript para controlar o escopo das variáveis. Todas as variáveis e funções declaradas ali dentro, como msg e funcao_interna não serão visíveis do lado de fora.


Outra maneira que você pode escrever é assim:

var LIB = (function(){

    function teste(){ alert("chamou") }

    return {
       teste:teste
    }
}());
3
  • Isso seria o mesmo que window.LIB = (function(){ /* funções */ })();? 2/06/2015 às 22:38
  • pensei a mesma coisa que o @re22 2/06/2015 às 22:41
  • 1
    @re22: Mais ou menos. Se você retornar um objeto com as funções exportadas da IIFE aí funciona (veja a minha edição)
    – hugomg
    3/06/2015 às 0:56

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 .