Jak zadeklarować zmienną globalną w JavaScript?

Odpowiedzi:

215

Jeśli musisz generować zmienne globalne w kodzie produkcyjnym (czego należy unikać), zawsze deklaruj je jawnie :

window.globalVar = "This is global!";

Chociaż można zdefiniować zmienną globalną, po prostu ją pomijając var(zakładając, że nie ma zmiennej lokalnej o tej samej nazwie), generuje to niejawną zmienną globalną, co jest złe i spowodowałoby błąd w trybie ścisłym .

Felix Kling
źródło
windowjest dostępna tylko w przeglądarkach. Czy możesz edytować swoją odpowiedź, aby działała we wszystkich środowiskach? Zobacz Jak uzyskać obiekt globalny w JavaScript?
Michał Perłakowski
52

Jeśli jest to jedyna aplikacja, w której zamierzasz używać tej zmiennej, podejście Felixa jest doskonałe. Jeśli jednak piszesz wtyczkę jQuery, weź pod uwagę "przestrzeń nazw" (szczegóły o cudzysłowach później ...) zmienne i funkcje potrzebne w obiekcie jQuery. Na przykład obecnie pracuję nad wyskakującym menu jQuery, które nazwałem miniMenu. Dlatego zdefiniowałem „przestrzeń nazw” miniMenuw jQuery i umieszczam tam wszystko.

Powodem, dla którego używam cudzysłowów, kiedy mówię o przestrzeniach nazw javascript, jest to, że tak naprawdę nie są one przestrzeniami nazw w normalnym sensie. Zamiast tego po prostu używam obiektu javascript i umieszczam wszystkie moje funkcje i zmienne jako właściwości tego obiektu.

Ponadto, dla wygody, zwykle dzielę przestrzeń nazw wtyczki na przestrzeń inazw dla rzeczy, które powinny być używane tylko wewnątrz wtyczki, aby ukryć ją przed użytkownikami wtyczki.

Tak to działa:

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

Teraz mogę po prostu zrobić $.miniMenu.i.globalVar = 3lub $.miniMenu.i.parseSomeStuff = function(...) {...}kiedykolwiek muszę coś zapisać globalnie i nadal trzymam to z dala od globalnej przestrzeni nazw.

Tomas Aschan
źródło
Dzięki za to Tomas, W witrynie, o której wspomniałem powyżej, podejście Felixa działa dobrze, ale mam inną witrynę, nad którą również pracuję, która używa kilku wtyczek i twoje podejście byłoby idealne, jeśli mogę sprawić, by działało. Pozdrawiam za pomoc.
Dancer
Działa to doskonale! Po prostu upewnij się, jak mówi @Tomas, stwórz własną klasę / uchwyt dla własnych niestandardowych funkcji lub zmiennych. +1
Pierre
Dzięki Tomas! Jeśli nie jest to już wymagane, usuń obiekt nadrzędny (np delete $.miniMenu.:). Czy to jest w porządku?
Kunj
1
@KunJ: Jasne, jak ze wszystkim: jeśli możesz zagwarantować, że nie będzie już używane, możesz je bezpiecznie usunąć. Jednak JavaScript wola śmieci zbierać je za ciebie, więc nie mam do delete $.miniMenu.
Tomas Aschan
20

EDYCJA Pytanie dotyczy JavaScript, odpowiedź dotyczy jQuery, co jest błędne. To stara odpowiedź, z czasów, gdy jQuery był szeroko rozpowszechniony.

Zamiast tego zalecam zrozumienie zakresów i zamknięć w JavaScript

Stara, zła odpowiedź: z jQuery możesz to zrobić, bez względu na to, gdzie jest deklaracja:

$my_global_var = 'my value';

I będzie dostępny wszędzie. Używam go do robienia szybkich galerii zdjęć, gdy obrazy są rozmieszczone w różnych miejscach, takich jak:

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

Wskazówka : uruchom cały kod w konsoli na tej stronie ;-)

aesede
źródło
3
Czy $ gallery i $ current nie są zwykłymi zmiennymi globalnymi? Działają, ponieważ definiujesz je jako zmienne globalne, pomijając `` zmienne '', ale znak dolara przed nimi nie czyni ich `` zmiennymi jQuery '' ... To dosłownie umieszczenie podkreślenia lub innego znaku z nich ... Będą to zmienne jQuery, jeśli użyjesz obiektu jQuery ($) i dodasz do niego właściwość: $ .myGlobalVariable = 'moja wartość' ...
Andres Elizondo
Prawdopodobnie masz rację, ale warto zauważyć, że używając składni $ myVar uzyskujesz 2 korzyści, 1) zmienna jest globalna bez żadnych specjalnych deklaracji (poza $); i 2) możesz bardzo łatwo śledzić zmienne globalne wewnątrz kodu. Otwarta na dyskusję ...
aesede
Błędna odpowiedź. Zgadzam się z Andresem, to wcale NIE jest zmienna jQuery. Jeśli nie zdefiniujesz $current = 0;na początku funkcji, późniejsza nie zadziała.
harrrrrrry
15

Oto podstawowy przykład zmiennej globalnej, do której mają dostęp pozostałe funkcje. Oto przykład dla Ciebie na żywo: 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';
}

Jeśli robisz to w ramach funkcji ready () jquery, upewnij się, że zmienna znajduje się wewnątrz funkcji ready () razem z innymi funkcjami.

Paul Dragoonis
źródło
Najlepsza odpowiedź na to, jak działają zmienne globalne w jQuery.
Clinton Green
1
Wiem, że kopię grób, ale nie jest to nawet wyraźna zmienna globalna. Jest to bardziej zgodne ze współdzieloną zmienną publiczną, która nie obejmuje zamknięcia dla bardzo małych skryptów. Są to dwie zupełnie różne metody / zastosowania, a ta sprawi, że będziesz miał poważne kłopoty, jeśli zadeklarujesz jawną globalną w skrypcie, który jest w środku kilku różnych skryptów. Mogę sobie tylko wyobrazić interfejs w moim zespole, który deklaruje zmienną globalną w górnej części skryptu, która jest dziesiątą wywoływaną do DOM.
Brian Ellis,
4

Zadeklaruj zmienną poza funkcjami

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
źródło
3

Najlepszym sposobem jest użycie closures, ponieważ windowobiekt jest bardzo, bardzo zaśmiecony właściwościami.

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 (na podstawie tej odpowiedzi )

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

Oto plnkr . Mam nadzieję, że to pomoże!

robe007
źródło