web-dev-qa-db-fra.com

Comment déclarer une variable globale en JavaScript?

Comment déclarer une variable globale en JavaScript?

javascriptglobal-variables
134
Dancer

Si vous devez générer des variables globales dans le code de production (ce qui devrait être évité) toujours les déclarer 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 implicite global, ce qui est une mauvaise chose à faire et générerait une erreur en mode strict .

213
Felix Kling

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 de nom" (détails sur les guillemets plus tard ...) nécessaires à la création de l'objet jQuery. Par exemple, je travaille actuellement sur un menu contextuel jQuery que j'ai appelé miniMenu. Ainsi, j'ai défini un "espace de noms" miniMenu sous 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 habituel. 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, par souci de commodité, je sous-espace généralement l'espace de noms du plug-in avec un espace de noms i pour les éléments qui ne doivent être utilisés qu'en interne dans le plug-in, afin de le masquer des utilisateurs du plug-in.

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 juste faire $.miniMenu.i.globalVar = 3 ou $.miniMenu.i.parseSomeStuff = function(...) {...} chaque fois que j'ai besoin de sauvegarder quelque chose globalement, et je le garde toujours en dehors de l'espace de noms global.

52
Tomas Aschan

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

Au lieu de cela, je recommande de comprendre scopes et fermetures en JavaScript

Ancienne, mauvaise réponse: Avec jQuery, vous pouvez 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 : lancez tout le code dans la console de cette page ;-)

20
aesede

Voici un exemple de base d'une variable globale à laquelle le reste de vos fonctions peut accéder. Voici un exemple concret 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 ready () de jQuery, assurez-vous que votre variable est dans la fonction ready () avec vos autres fonctions.

15
Paul Dragoonis

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
}
4
user3632465

Le meilleur moyen est d'utiliser closures, car l'objet window devient très, très encombré avec 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 ça aide!

3
robe007