javascript - scripts - js declare global var
Variables globales en Javascript en varios archivos (5)
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.
Intenté 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>
¿Lo que intento hacer es incluso factible?
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 utilizar 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 él hasta ahora.
Debe declarar la variable antes de incluir el archivo helpers.js. Simplemente crea una etiqueta de script encima del include 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>
La variable se puede declarar en el archivo .js y simplemente se hace 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 alert() prueba alert() mostrará dos cosas diferentes, y el valor escrito en la página será diferente la segunda vez.
OK, chicos, esta es mi pequeña prueba también. Tuve un problema similar, así que decidí probar 3 situaciones:
- Un archivo HTML, un archivo JS externo ... ¿funciona en absoluto? ¿Pueden las funciones comunicarse a través de una var global?
- Dos archivos HTML, un archivo JS externo, un navegador, dos pestañas: ¿interferirán a través de la var global?
- Un archivo HTML, abierto por 2 navegadores, ¿funcionará e interferirá?
Todos los resultados fueron los esperados.
- 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).
- Ellos no interfieren. Aparentemente se han realizado copias distintas del archivo JS para cada pestaña del navegador, cada página HTML.
- Todo funciona de forma independiente, como se esperaba.
En vez de buscar tutoriales, me pareció más fácil probarlo, así que lo hice. Mi conclusión: cada vez que incluya un archivo JS externo en su página HTML, el contenido del JS externo se "copiará / pegará" en su página HTML antes de que se procese 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>
Puedes hacer un objeto json como:
globalVariable={example_attribute:"SomeValue"};
en fileA.js
Y acceda desde fileB.js como: globalVariable.example_attribute