Variables globales en Javascript en varios archivos

130

Un montón de mi código JavaScript está en un archivo externo llamado helpers.js. Dentro del HTML que llama a este código JavaScript, necesito saber si se ha llamado a cierta función de helpers.js.

He intentado crear una variable global definiendo:

var myFunctionTag = true;

En alcance global tanto en mi código HTML como en helpers.js.

Aquí está mi 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>

¿Es posible lo que estoy tratando de hacer?

javascript scope global-variables global Goro
fuente
1
Bueno, acabas de configurarlo como falso en el segundo <script>bloque de etiquetas. Acabo de probar 2 enfoques diferentes (sin declarar la var antes del archivo helpers.js) y ambos funcionaron. Publicaré una respuesta, pero parece que debe faltar alguna pieza clave de información en su pregunta.
Stephen P
window.onload = function () {// Comience su código} Sería la mejor solución - Y esto es hablar en Slowpoke :)
Schoening

Respuestas:

125

Debe declarar la variable antes de incluir el archivo helpers.js. Simplemente cree una etiqueta de script encima de la inclusión para helpers.js y defínalo allí.

<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
fuente
9
no funciona para mí porque cuando intento acceder desde otro js cargado en otro html, dice que la variable no está declarada
ACV
16

La variable se puede declarar en el .jsarchivo y simplemente hacer referencia en el archivo HTML. Mi versión 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");
    }
}

Y una página para probarlo:

<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>

Verá que la prueba alert()mostrará dos cosas diferentes, y el valor escrito en la página será diferente la segunda vez.

Stephen P
fuente
15

Bien, muchachos, aquí está mi pequeña prueba también. Tuve un problema similar, así que decidí probar 3 situaciones:

  1. Un archivo HTML, un archivo JS externo ... ¿funciona? ¿Se pueden comunicar las funciones a través de una variable global?
  2. Dos archivos HTML, un archivo JS externo, un navegador, dos pestañas: ¿interferirán a través de la var global?
  3. Un archivo HTML, abierto por 2 navegadores, ¿funcionará y interferirán?

Todos los resultados fueron los esperados.

  1. Funciona. Las funciones f1 () y f2 () se comunican a través de var global (var está en el archivo JS externo, no en el archivo HTML).
  2. No interfieren. Aparentemente se han realizado copias distintas del archivo JS para cada pestaña del navegador, cada página HTML.
  3. Todo funciona de forma independiente, como se esperaba.

En lugar de buscar tutoriales, me resultó más fácil probarlo, así que lo hice. Mi conclusión: cada vez que incluye un archivo JS externo en su página HTML, el contenido del JS externo se "copia / pega" en su página HTML antes de que se renderice la página. O en su página PHP si lo desea. Por favor corrígeme si me equivoco aquí. Gracias

Mis archivos de ejemplo siguen:

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>
Martín
fuente
1
HTML 1 y HTML 2 son idénticos (excepto el título de la página) ... aún así, hice dos archivos, solo para separarlos físicamente.
Martin
1

Creo que debería usar "almacenamiento local" en lugar de variables globales.

Si le preocupa que el "almacenamiento local" no sea compatible con navegadores muy antiguos, considere usar un complemento existente que verifique la disponibilidad del "almacenamiento local" y utilice otros métodos si no está disponible.

Utilicé http://www.jstorage.info/ y estoy contento con eso hasta ahora.

paulo62
fuente
1

Puedes hacer un objeto json como:

globalVariable={example_attribute:"SomeValue"};

en fileA.js

Y acceda desde fileB.js como: globalVariable.example_attribute

partizanos
fuente
1

Hola, para pasar valores de un archivo js a otro archivo js podemos usar el concepto de almacenamiento local

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

Archivo Two.js

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

 alert(test);
}

Archivo Three.js

localStorage.name = 1;
Sajith
fuente
1

Si estás usando el nodo:

  1. Cree un archivo para declarar el valor, digamos que se llama values.js:
export let someValues = {
  value1: 0
}

Luego, impórtelo según sea necesario en la parte superior de cada archivo en el que se usa (por ejemplo file.js)

import { someValues } from './values'

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

// archivo Javascript 1

localStorage.setItem('Data',10);

// archivo Javascript 2

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

No olvides vincular tus archivos JS en html :)

MrJ
fuente