webentwicklung-frage-antwort-db.com.de

Wie deklariere ich eine globale Variable in JavaScript?

Wie kann ich eine globale Variable in JavaScript deklarieren?

134
Dancer

Wenn Sie globale Variablen im Produktionscode generieren müssen (was vermieden werden sollte) immer deklarieren explizit:

window.globalVar = "This is global!";

Während es möglich ist, eine globale Variable zu definieren, indem nur var weggelassen wird (vorausgesetzt, es gibt keine lokale Variable mit demselben Namen), generiert dies ein implizit global, was a ist schlechte Sache zu tun und würde einen Fehler im strengen Modus erzeugen.

213
Felix Kling

Wenn dies die einzige Anwendung ist, in der Sie diese Variable verwenden, ist Felix 'Ansatz hervorragend. Wenn Sie jedoch ein jQuery-Plugin schreiben, sollten Sie die im jQuery-Objekt benötigten Variablen und Funktionen für den Namensraum berücksichtigen (Details zu den Anführungszeichen später ...). Zum Beispiel arbeite ich gerade an einem jQuery-Popup-Menü, das ich miniMenu genannt habe. Daher habe ich unter jQuery einen "Namespace" miniMenu definiert und alles dort abgelegt.

Der Grund, warum ich Anführungszeichen verwende, wenn ich über JavaScript-Namespaces spreche, ist, dass es sich im normalen Sinne nicht wirklich um Namespaces handelt. Stattdessen benutze ich einfach ein Javascript-Objekt und platziere alle meine Funktionen und Variablen als Eigenschaften dieses Objekts.

Außerdem füge ich der Einfachheit halber dem Plugin-Namespace normalerweise einen i-Namespace für Dinge hinzu, die nur intern im Plugin verwendet werden sollten, um sie vor Benutzern des Plugins zu verbergen.

So funktioniert es:

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

Jetzt kann ich einfach $.miniMenu.i.globalVar = 3 Oder $.miniMenu.i.parseSomeStuff = function(...) {...} ausführen, wenn ich etwas global speichern muss, und ich halte es dennoch aus dem globalen Namespace heraus.

52
Tomas Aschan

[~ # ~] edit [~ # ~] Die Frage betrifft JavaScript, die Antwort betrifft jQuery, was falsch ist. Dies ist eine alte Antwort aus Zeiten, als jQuery weit verbreitet war.

Stattdessen empfehle ich, Bereiche und Abschlüsse in JavaScript zu verstehen

Alte, schlechte Antwort: Mit jQuery können Sie dies einfach tun, egal wo sich die Deklaration befindet:

$my_global_var = 'my value';

Und wird überall verfügbar sein. Ich benutze es, um schnell Bildergalerien zu erstellen, wenn Bilder an verschiedenen Orten verteilt sind, wie zum Beispiel:

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

Tipp : Führen Sie den gesamten Code in der Konsole auf dieser Seite aus ;-)

20
aesede

Hier ist ein einfaches Beispiel für eine globale Variable, auf die die übrigen Funktionen zugreifen können. Hier ist ein Live-Beispiel für Sie: 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';
}

Wenn Sie dies in einer Funktion jquery ready () tun, stellen Sie sicher, dass sich Ihre Variable zusammen mit Ihren anderen Funktionen in der Funktion ready () befindet.

15
Paul Dragoonis

Deklarieren Sie die Variable außerhalb von Funktionen

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

Der beste Weg ist die Verwendung von closures, da das window Objekt sehr, sehr überladen wird mit Eigenschaften.

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 (Basierend auf diese Antwort )

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

Hier ist das plnkr . Hoffe es hilft!

3
robe007