Comment déclarer une variable globale en JavaScript?

Comment puis-je déclarer une variable globale en JavaScript?

Si vous devez générer des variables globales dans le code de production (ce qui doit être évité), déclarez-les toujours explicitement :

window.globalVar = "This is global!";

Bien qu'il soit possible de définir une variable globale en omettant simplement var(en supposant qu'il n'y a pas de variable locale du même nom), cela génère un global implicite , ce qui est une mauvaise chose à faire et générerait une erreur en mode strict .

Si c'est la seule application où vous allez utiliser cette variable, l'approche de Felix est excellente. Cependant, si vous écrivez un plugin jQuery, considérez les variables "namespacing" (détails sur les guillemets plus loin ...) et les fonctions nécessaires sous l'objet jQuery. Par exemple, je travaille actuellement sur un menu contextuel jQuery que j'ai appelé miniMenu. Ainsi, j'ai défini un "namespace" miniMenusous jQuery, et j'y place tout.

La raison pour laquelle j'utilise des guillemets lorsque je parle d'espaces de noms javascript est qu'ils ne sont pas vraiment des espaces de noms au sens normal du terme. Au lieu de cela, j'utilise simplement un objet javascript et place toutes mes fonctions et variables en tant que propriétés de cet objet.

De plus, pour plus de commodité, je sous-espace généralement l'espace de noms du plugin avec un iespace de noms pour les éléments qui ne devraient être utilisés qu'en interne dans le plugin, afin de le cacher aux utilisateurs du plugin.

Voilà comment cela fonctionne:

// An object to define utility functions and global variables on:
$.miniMenu = new Object(); 
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();

Maintenant, je peux simplement faire $.miniMenu.i.globalVar = 3ou $.miniMenu.i.parseSomeStuff = function(...) {...}chaque fois que j'ai besoin de sauvegarder quelque chose globalement, et je le garde toujours hors de l'espace de noms global.

EDIT La question concerne JavaScript, la réponse concerne jQuery, ce qui est faux. C'est une vieille réponse, de l'époque où jQuery était répandu.

Au lieu de cela, je recommande de comprendre les portées et les fermetures en JavaScript

Ancienne, mauvaise réponse: avec jQuery, vous pouvez simplement le faire, peu importe où se trouve la déclaration:

$my_global_var = 'my value';

Et sera disponible partout. Je l'utilise pour créer des galeries d'images rapides, lorsque les images sont réparties à différents endroits, comme ceci:

$gallery = $('img');
$current = 0;

$gallery.each(function(i,v){
    // preload images
    (new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
    $current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
    $current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});

Astuce : exécutez tout ce code dans la console de cette page ;-)

Voici un exemple de base d'une variable globale à laquelle le reste de vos fonctions peut accéder. Voici un exemple en direct pour vous: http://jsfiddle.net/fxCE9/

var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);


function myFunction1() {
    myVariable = 'Hello 1';
}

function myFunction2() {
    myVariable = 'Hello 2';
}

Si vous faites cela dans une fonction jquery ready (), assurez-vous que votre variable est à l'intérieur de la fonction ready () avec vos autres fonctions.

Déclarer la variable en dehors des fonctions

function dosomething(){
  var i = 0; // can only be used inside function
}

var i = '';
function dosomething(){
  i = 0; // can be used inside and outside the function
}

La meilleure façon est d'utiliser closures, car l' windowobjet devient très, très encombré de propriétés.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript">
      MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
    </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello !</h1>
  </body>    
</html>

init.js (basé sur cette réponse )

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function(i) {
            return _args[i];
        }
    };
}());

script.js

// Here you can use the values defined in the html as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

Voici le plnkr . J'espère que cela vous aidera!