Come dichiarare una variabile globale in JavaScript?

135

Come posso dichiarare una variabile globale in JavaScript?

javascript global-variables

— Ballerino
fonte

215

Se devi generare variabili globali nel codice di produzione (che dovrebbe essere evitato) dichiarale sempre esplicitamente :

window.globalVar = "This is global!";

Mentre è possibile definire una variabile globale semplicemente omettendo var(supponendo che non vi sia alcuna variabile locale con lo stesso nome), farlo genera un globale implicito , che è una brutta cosa da fare e genererebbe un errore in modalità rigorosa .

— Felix Kling
fonte

windowè disponibile solo nei browser. Potresti modificare la tua risposta per farlo funzionare in tutti gli ambienti? Vedi Come ottenere l'oggetto globale in JavaScript?

— Michał Perłakowski,

52

Se questa è l'unica applicazione in cui utilizzerai questa variabile, l'approccio di Felix è eccellente. Tuttavia, se stai scrivendo un plug-in jQuery, prendi in considerazione le variabili e le funzioni di "namespace" (dettagli sulle citazioni successive ...) necessarie sotto l'oggetto jQuery. Ad esempio, attualmente sto lavorando a un menu a comparsa jQuery che ho chiamato miniMenu. Pertanto, ho definito uno "spazio dei nomi" miniMenuin jQuery e ho inserito tutto lì.

Il motivo per cui uso le virgolette quando parlo di spazi dei nomi javascript è che non sono realmente spazi dei nomi in senso normale. Invece, uso solo un oggetto javascript e inserisco tutte le mie funzioni e variabili come proprietà di questo oggetto.

Inoltre, per comodità, di solito sottopongo allo spazio dei nomi del plug-in uno ispazio dei nomi per cose che dovrebbero essere utilizzate solo internamente al plug-in, in modo da nasconderlo agli utenti del plug-in.

È così che funziona:

// 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();

Ora posso semplicemente fare $.miniMenu.i.globalVar = 3o $.miniMenu.i.parseSomeStuff = function(...) {...}ogni volta che devo salvare qualcosa a livello globale, e lo tengo ancora fuori dallo spazio dei nomi globale.

— Tomas Aschan
fonte

Grazie per quello Tomas, Nel sito che ho menzionato sopra l'approccio Felix funziona bene, ma ho anche un altro sito su cui sto lavorando che utilizza diversi plugin e il tuo approccio sarebbe l'ideale se riesco a farlo funzionare. Saluti per il tuo aiuto.

— Ballerino,

Funziona perfettamente! Assicurati, come dice @Tomas, di creare la tua classe / titolare per le tue funzioni o variabili personalizzate. +1

— Pierre,

Grazie Tomas! Se non è più necessario, eliminare l'oggetto principale (ad es delete $.miniMenu.:). Va bene?

— Kunj

1

@KunJ: Certo, come con qualsiasi cosa: se puoi garantire che non verrà più utilizzato, è sicuro cancellarlo. Tuttavia, JavaScript lo raccoglierà spazzatura per te, quindi non è necessario delete $.miniMenu.

— Tomas Aschan,

20

EDIT La domanda riguarda JavaScript, la risposta riguarda jQuery, che è errata. Questa è una vecchia risposta, dai tempi in cui jQuery era molto diffuso.

Invece, raccomando di comprendere ambiti e chiusure in JavaScript

Vecchia, cattiva risposta: con jQuery puoi semplicemente farlo, indipendentemente da dove sia la dichiarazione:

$my_global_var = 'my value';

E sarà disponibile ovunque. Lo uso per creare gallerie di immagini veloci, quando le immagini sono diffuse in luoghi diversi, in questo modo:

$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();
});

Suggerimento : esegui l'intero codice nella console in questa pagina ;-)

— aesede
fonte

3

$ Gallery e $ current non sono solo normali variabili globali? Funzionano perché li stai definendo variabili globali omettendo 'var', ma il simbolo del dollaro davanti a loro non li rende 'variabili jQuery' ... È letteralmente come mettere un carattere di sottolineatura o qualsiasi altro segno da loro ... Sarebbero variabili jQuery se si utilizza l'oggetto jQuery ($) e si aggiunge una proprietà ad esso: $ .myGlobalVariable = 'my value' ...

— Andres Elizondo

Probabilmente hai ragione, ma ciò che vale la pena notare è che usando la sintassi $ myVar ottieni 2 avventaggi, 1) la variabile è globale senza alcuna dichiarazione speciale (oltre a $); e 2) è possibile tenere traccia delle variabili globali molto facilmente all'interno del codice. Aperto alla discussione però ...

— aesede

Una risposta fuorviante. Concordo con Andres, che NON è affatto una variabile jQuery. Se non si definisce $current = 0;all'inizio della funzione, quella successiva non funzionerà.

— harrrrrrry,

15

Ecco un esempio di base di una variabile globale a cui possono accedere le altre funzioni. Ecco un esempio dal vivo per te: 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';
}

Se lo stai facendo all'interno di una funzione ready () di jquery, assicurati che la tua variabile sia all'interno della funzione ready () insieme alle altre tue funzioni.

— Paul Dragoonis
fonte

La migliore risposta per come funzionano ancora le variabili globali in jQuery.

— Clinton Green

1

So che sto scavando gravemente, ma questa non è nemmeno una variabile globale esplicita. Questo è più in sintonia con una variabile pubblica condivisa non inserita in una chiusura per script estremamente piccoli. Sono due metodi / usi completamente diversi e questo ti metterà nei guai seri se dichiari un globale esplicito in uno script che si trova nel mezzo di diversi script diversi. Posso solo immaginare un front-end nel mio team che dichiara una variabile globale nella parte superiore di uno script che è il decimo che viene chiamato nel DOM.

— Brian Ellis,

4

Dichiarare la variabile al di fuori delle funzioni

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
}

— user3632465
fonte

3

Il modo migliore è usare closures, perché l' windowoggetto diventa molto, molto ingombro di proprietà.

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 (Basato su questa risposta )

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

Ecco il plnkr . Spero che sia d'aiuto!

— robe007
fonte