Posso acessar variáveis ​​de outro arquivo?

178

É possível usar uma variável em um arquivo chamado first.jsdentro de outro arquivo chamado second.js?

first.jscontém uma variável chamada colorcodes.

SAK
fonte
@Roki: Por exemplo, você poderia ser o carregamento de dados de outro site, enquanto o script para processá-los é em seu site:<script src="http://datasource.example.net/first.js"></script><script src="second.js"></script>
Piskvor deixou o prédio
o site da fonte de dados não possui retorno de chamada? o que quero dizer: download second.js contém: ... function secondscriptFn (o) {// faça algo / w data; } ... baixe datasource.example.net/first.js?callback=secondscriptFn e, em seguida, primeiro contenha: secondscriptFn ({back: "# fff", front: "# 888", side: "# 369"}); mais controlável e robusta do que as versões globais escopo, porque você pode controlar o escopo first.js ...
Roki
4
Apenas como uma observação se você estiver usando jQuery e você estiver tentando fazer isso. Você precisa garantir que não coloque a variável que está tentando acessar do primeiro arquivo na função '$ (document) .ready ()'; caso contrário, não será carregado corretamente, pelo menos pela minha experiência.
Collin McGuire

Respostas:

195

Como Fermin disse, uma variável no escopo global deve estar acessível a todos os scripts carregados após a declaração. Você também pode usar uma propriedade de windowou (no escopo global) thispara obter o mesmo efeito.

// first.js
var colorCodes = {

  back  : "#fff",
  front : "#888",
  side  : "#369"

};

... em outro arquivo ...

// second.js
alert (colorCodes.back); // alerts `#fff`

... no seu arquivo html ...

<script type="text/javascript" src="first.js"></script> 
<script type="text/javascript" src="second.js"></script> 
Dagg Nabbit
fonte
5
Em um navegador, window está o escopo global - portanto, window.colorCodes e o objeto (global) colorCodes são o mesmo objeto.
Piskvor saiu do prédio 14/07/10
Verdadeiro ... a razão pela qual mencionei é nos casos em que você precisa definir uma variável global a partir de um escopo não global.
Dagg Nabbit
2
e o html? em html eu tenho: <script>var variable1 = true;</script> <script src="first.js"></script>first.js verá essa variável? Eu testei-o em extensão do Google Chrome e não funcionou
USER25
@ user25, tenho o mesmo problema, você encontrou uma solução?
Mercury
2
Se você estiver usando eslint, você pode adicionar /* global colorCodes */na linha acima para impedir que "... não está definido" mensagem de erro
Joseph K.
41

Você pode exportar a variável do primeiro arquivo usando a exportação .

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
export { colorCode };

Em seguida, importe a variável no segundo arquivo usando import .

//second.js
import { colorCode } from './first.js'

exportação - MDN

Germa Vinsmoke
fonte
14

Gostei da resposta acima , mas, embora não tenha funcionado comigo

porque eu era declaringessas variáveis insideJQuery$( document ).ready()

portanto, certifique-se de declarar suas variáveis ​​dentro da <script>tag e não em outro lugar

Basheer AL-MOMANI
fonte
13

Isso deve funcionar - defina uma variável global no firstfile e acesse-a no secondfile:

<script src="/firstfile.js"></script>
<script src="/secondfile.js"></script>

firstfile.js:

var colors = {
   text:'#000000',
   background:'#aaaaaa',
   something_else:'blue'
};

secondfile.js:

do_something_with(colors.background);

Observe que a ordem na qual você carrega os arquivos de script é significativa para alguns navegadores (IE6 com certeza, talvez outros)

Piskvor saiu do prédio
fonte
1
Pode ser necessário anexar essa variável ao objeto como: this.colors = colors. Se for um objeto e não uma enumeração, você pode criar uma função para retornar apenas o valor. this.getTextColor = function () {return colors.text; };
precisa saber é
1
como você atualizaria uma variável de uma página carregada? <script type = "text / javascript"> colors.background = "nova col"; </script> parece não funcionar.
precisa saber é
6

Usando o Node.js, você pode exportar a variável via módulo.

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
module.exports = { colorCode };

Em seguida, importe o módulo / variável no segundo arquivo usando require.

//second.js
const { colorCode } = require('./first.js')

Você pode usar o importe exportaproach do ES6 usando Webpack / Babel, mas no Node.js você precisa habilitar um sinalizador e usa a extensão .mjs.

Xinton
fonte
3

Me deparei com amplify.js . É realmente simples de usar. Para armazenar um valor, vamos chamá-lo de "myValue", você faz:

amplify.store("myKey", "myValue")

E para acessá-lo, você faz

amplify.store("myKey")
Ben Leitner
fonte
2

Se você armazenar seus códigos de cores em uma variável global, poderá acessá-los a partir de qualquer arquivo javascript.

Fermin
fonte
2

Eu posso estar fazendo isso um pouco diferente. Não sei por que uso essa sintaxe, copiei-a de algum livro há muito tempo. Mas cada um dos meus arquivos js define uma variável. O primeiro arquivo, sem nenhum motivo, é chamado R:

    var R = 
    { 
        somevar: 0,
        othervar: -1,

        init: function() {
          ...
        } // end init function

        somefunction: function(somearg) {
          ...
        }  // end somefunction

        ...

    }; // end variable R definition


    $( window ).load(function() {
       R.init();
    })

E então, se eu tenho um grande pedaço de código que quero separar, coloco em um arquivo separado e um nome de variável diferente, mas ainda posso fazer referência às variáveis ​​e funções R. Liguei para o novo TD sem nenhuma boa razão:

    var TD = 
    { 
        xvar: 0,
        yvar: -1,

        init: function() {
           ...
        } // end init function

        sepfunction: function() {
           ...
           R.somefunction(xvar);
           ...
        }  // end somefunction

        ...

    }; // end variable TD definition


    $( window ).load(function() {
       TD.init();
    })

Você pode ver que onde na TD 'função' eu chamo de R. alguma função. Sei que isso não fornece nenhuma eficiência de tempo de execução porque os dois scripts precisam carregar, mas ajuda a manter meu código organizado.

Alan
fonte
0

Uma melhor maneira é usar o window. ESTADO INICIAL

<script src="/firstfile.js">
    // first.js
    window.__INITIAL_STATE__ = {
      back  : "#fff",
      front : "#888",
      side  : "#369"
    };
</script>
<script src="/secondfile.js">
    //second.js
    console.log(window.__INITIAL_STATE__)
    alert (window.__INITIAL_STATE__);
</script>
Karan Shaw
fonte
Qual é a vantagem dessa abordagem em relação às outras respostas?
Boric