Cómo declarar una variable global en un archivo .js

86

Necesito algunas variables globales que necesito en todos los .jsarchivos.

Por ejemplo, considere los siguientes 4 archivos:

  1. global.js
  2. js1.js
  3. js2.js
  4. js3.js

¿Hay alguna manera de declarar 3 variables globales global.jsy acceder a ellas en cualquiera de los otros 3 .jsarchivos considerando que cargo los 4 archivos anteriores en un documento HTML?

¿Alguien puede decirme si esto es posible o hay una solución alternativa para lograrlo?

kp11
fuente

Respuestas:

96

Simplemente defina sus variables en global.js fuera del alcance de una función:

// global.js
var global1 = "I'm a global!";
var global2 = "So am I!";

// other js-file
function testGlobal () {
    alert(global1);
}

Para asegurarse de que esto funcione, debe incluir / vincular a global.js antes de intentar acceder a las variables definidas en ese archivo:

<html>
    <head>
        <!-- Include global.js first -->
        <script src="/YOUR_PATH/global.js" type="text/javascript"></script>
        <!-- Now we can reference variables, objects, functions etc. 
             defined in global.js -->
        <script src="/YOUR_PATH/otherJsFile.js" type="text/javascript"></script>
    </head>
    [...]
</html>

Por supuesto, puede vincular las etiquetas del script justo antes de la etiqueta <body> de cierre si no desea que la carga de archivos js interrumpa la carga inicial de la página.

PatrikAkerstrand
fuente
4
Si bien esta respuesta es correcta, recomendaría que establezca el alcance de la variable Javascript de Google para obtener una mejor comprensión y posiblemente evitar hacer las cosas de esta manera exacta.
aleemb
1
Convenido. Siempre trato de abarcar todas las funciones y variables en un "espacio de nombres" común para evitar el desorden y los conflictos. Normalmente lo nombro como una abreviatura del proyecto o empresa.
PatrikAkerstrand
Rechazar esta respuesta y las demás les gusta porque asume que la variable global se creará en un alcance global, y también requiere que la primera mención de la variable esté en el alcance global antes de todas las demás menciones.
Andrew
1
@Andrew Esta respuesta fue escrita hace ocho años. Para todos los efectos, era correcto en ese entonces. Si realmente desea hacer una contribución, ¿podría sugerir una edición en su lugar?
PatrikAkerstrand
@PatrikAkerstrand Las citas en realidad no hacen ninguna diferencia. Las otras respuestas que utilizan un objeto global son suficientes; Expliqué por qué esto no es así.
Andrew
89

El enfoque recomendado es:

window.greeting = "Hello World!"

Luego puede acceder a él desde cualquier función:

function foo() {

   alert(greeting); // Hello World!
   alert(window["greeting"]); // Hello World!
   alert(window.greeting); // Hello World! (recommended)

}

Se prefiere este enfoque por dos razones.

  1. La intención es explícita. El uso de la varpalabra clave puede conducir fácilmente a declarar globales varsque se pretendía que fueran locales o viceversa. Este tipo de alcance variable es un punto de confusión para muchos desarrolladores de Javascript. Entonces, como regla general, me aseguro de que todas las declaraciones de variables estén precedidas por la palabra clave varo el prefijo window.

  2. También estandariza esta sintaxis para leer las variables de esta manera, lo que significa que un ámbito local varno golpea al global varo viceversa. Por ejemplo, lo que sucede aquí es ambiguo:

 

 greeting = "Aloha";

 function foo() {
     greeting = "Hello"; // overrides global!
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // does it alert "Hello" or "Howdy" ?

Sin embargo, esto es mucho más limpio y menos propenso a errores (realmente no necesita recordar todas las reglas de alcance de variables):

 function foo() {
     window.greeting = "Hello";
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // alerts "Howdy"
aleemb
fuente
Adjuntar variables a la ventana debería funcionar en todos los navegadores (y también es el enfoque que tomo, ¡+1!).
Dandy
1
@Dan, si declaras "var testvar = 'hello';" fuera de una función, se agrega automáticamente al objeto de ventana y puede acceder a él con "window.testvar".
zkent
1
@zkent, es cierto, pero usar el objeto Window es aún mejor porque es posible que desee convertir su código en algo como un café más tarde.
Nami WANG
¿Es mejor usar Ventana en lugar de prefijo de documento?
Andrew
7

¿Lo has probado?

Si lo haces:

var HI = 'Hello World';

En global.js. Y luego haz:

alert(HI);

En js1.jsél lo alertará bien. Solo debes incluir global.jsantes el resto en el documento HTML.

El único inconveniente es que debe declararlo en el alcance de la ventana (no dentro de ninguna función).

Podría simplemente rechazar la varpieza y crearla de esa manera, pero no es una buena práctica.

Paolo Bergantino
fuente
7

Como se mencionó anteriormente, existen problemas con el uso del alcance más alto en su archivo de script. Aquí hay otro problema: el archivo de secuencia de comandos puede ejecutarse desde un contexto que no es el contexto global en algún entorno de tiempo de ejecución.

Se ha propuesto asignar el global a windowdirectamente. Pero eso también depende del tiempo de ejecución y no funciona en Node, etc. Esto demuestra que la administración de variables globales portátiles necesita una consideración cuidadosa y un esfuerzo adicional. ¡Quizás lo arreglen en futuras versiones de ECMS!

Por ahora, recomendaría algo como esto para admitir una administración global adecuada para todos los entornos de tiempo de ejecución:

/**
 * Exports the given object into the global context.
 */
var exportGlobal = function(name, object) {
    if (typeof(global) !== "undefined")  {
        // Node.js
        global[name] = object;
    }
    else if (typeof(window) !== "undefined") {
        // JS with GUI (usually browser)
        window[name] = object;
    }
    else {
        throw new Error("Unkown run-time environment. Currently only browsers and Node.js are supported.");
    }
};


// export exportGlobal itself
exportGlobal("exportGlobal", exportGlobal);

// create a new global namespace
exportGlobal("someothernamespace", {});

Es un poco más mecanografiado, pero hace que su gestión de variables globales esté preparada para el futuro.

Descargo de responsabilidad: parte de esta idea se me ocurrió al mirar versiones anteriores de stacktrace.js .

Creo que también se puede usar Webpack u otras herramientas para obtener una detección más confiable y menos pirateada del entorno de tiempo de ejecución.

Domi
fuente
2
GLOBALahora está en desuso y globaldebería usarse en su lugar.
Thomas
2

Sí, puedes acceder a ellos. Debe declararlos en 'espacio público' (fuera de cualquier función) como:

var globalvar1 = 'value';

Puede acceder a ellos más adelante, también en otros archivos.

Ropstah
fuente