Variáveis ​​globais em Javascript em vários arquivos

130

Um monte de meu código JavaScript está em um arquivo externo chamado helpers.js. Dentro do HTML que chama esse código JavaScript, preciso saber se uma determinada função do helpers.js foi chamada.

Eu tentei criar uma variável global definindo:

var myFunctionTag = true;

No escopo global, tanto no meu código HTML quanto no helpers.js.

Aqui está a aparência do meu código html:

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

O que estou tentando fazer é viável?

javascript scope global-variables global Goro
fonte
1
Bem, você acabou de configurá- lo como false no segundo <script>bloco de tags. Eu apenas tentei duas abordagens diferentes (sem declarar a var antes do arquivo helpers.js) e ambas funcionaram. Vou postar uma resposta, mas parece que algumas informações importantes estão faltando na sua pergunta.
Stephen P
window.onload = function () {// iniciar o seu código} O relator a melhor solução - E esta é Slowpoke fala :)
Schoening

Respostas:

125

Você precisa declarar a variável antes de incluir o arquivo helpers.js. Simplesmente crie uma tag de script acima do include for helpers.js e defina-a lá.

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>
tvanfosson
fonte
9
não funciona para mim, porque quando tentar aceder a partir de outro js carregados em outro html, ele diz que a variável não é declarada
ACV
16

A variável pode ser declarada no .jsarquivo e simplesmente referenciada no arquivo HTML. Minha versão de helpers.js:

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

E uma página para testá-lo:

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

Você verá que o teste alert()exibirá duas coisas diferentes e o valor gravado na página será diferente na segunda vez.

Stephen P
fonte
15

OK, pessoal, aqui está o meu pequeno teste também. Como tive um problema semelhante, resolvi testar três situações:

  1. Um arquivo HTML, um arquivo JS externo ... funciona mesmo - as funções podem se comunicar por meio de uma var global?
  2. Dois arquivos HTML, um arquivo JS externo, um navegador e duas guias: eles interferem na var global?
  3. Um arquivo HTML, aberto por dois navegadores, funcionará e eles interferirão?

Todos os resultados foram os esperados.

  1. Funciona. As funções f1 () e f2 () se comunicam via var global (var está no arquivo JS externo, não no arquivo HTML).
  2. Eles não interferem. Aparentemente, cópias distintas do arquivo JS foram feitas para cada guia do navegador, cada página HTML.
  3. Tudo funciona de forma independente, conforme o esperado.

Em vez de navegar nos tutoriais, achei mais fácil testá-lo, por isso o fiz. Minha conclusão: sempre que você incluir um arquivo JS externo em sua página HTML, o conteúdo do JS externo será "copiado / colado" em sua página HTML antes que a página seja renderizada. Ou em sua página PHP, se quiser. Por favor, corrija-me se estiver errado aqui. Thanx.

Meus arquivos de exemplo são os seguintes:

JS EXTERNO:

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
Martin
fonte
1
HTML 1 e HTML 2 são idênticos (exceto o título da página) ... ainda assim, criei dois arquivos, apenas para separá-los fisicamente.
Martin
1

Eu acho que você deveria estar usando "armazenamento local" em vez de variáveis ​​globais.

Se você está preocupado com o fato de que o "armazenamento local" pode não ser suportado em navegadores muito antigos, considere usar um plug-in existente que verifique a disponibilidade do "armazenamento local" e use outros métodos se ele não estiver disponível.

Eu usei o http://www.jstorage.info/ e estou feliz com isso até agora.

paulo62
fonte
1

Você pode criar um objeto json como:

globalVariable={example_attribute:"SomeValue"};

em fileA.js

E acesse-o em fileB.js como: globalVariable.example_attribute

partizanos
fonte
1

Oi para passar valores de um arquivo js para outro arquivo js, ​​podemos usar o conceito de armazenamento local

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Arquivo Two.js

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Arquivo Three.js

localStorage.name = 1;
Sajith
fonte
1

Se você estiver usando o nó:

  1. Crie um arquivo para declarar valor, digamos que seja chamado values.js:
export let someValues = {
  value1: 0
}

Em seguida, importe-o conforme necessário na parte superior de cada arquivo em que é usado (por exemplo, file.js):

import { someValues } from './values'

console.log(someValues);
Jared Wilber
fonte
-1

// arquivo Javascript 1

localStorage.setItem('Data',10);

// arquivo Javascript 2

var number=localStorage.getItem('Data');

Não se esqueça de vincular seus arquivos JS em html :)

MrJ
fonte