Wie vermeide ich globale Variablen in JavaScript?

Ich schlage das Modulmuster vor.

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

Zuallererst ist es unmöglich, globales JavaScript zu vermeiden, etwas wird immer den globalen Rahmen sprengen. Auch wenn Sie einen Namespace erstellen, was immer noch eine gute Idee ist, ist dieser Namespace global.

Es gibt jedoch viele Ansätze, um den globalen Geltungsbereich nicht zu missbrauchen. Zwei der einfachsten sind entweder Closure oder, da Sie nur eine Variable haben, die Sie im Auge behalten müssen, setzen Sie sie einfach als eine Eigenschaft der Funktion selbst (die dann als static -Variable behandelt werden kann). .

Schließung

var startUpload = (function() {
  var uploadCount = 1;  // <----
  return function() {
    var fil = document.getElementById("FileUpload" + uploadCount++);  // <----

    if(!fil || fil.value.length == 0) {    
      alert("Finished!");
      document.forms[0].reset();
      uploadCount = 1; // <----
      return;
    }

    disableAllFileInputs();
    fil.disabled = false;
    alert("Uploading file " + uploadCount);
    document.forms[0].submit();
  };
})();

* Beachten Sie, dass das Inkrementieren von uploadCount hier intern erfolgt

Function-Eigenschaft

var startUpload = function() {
  startUpload.uploadCount = startUpload.count || 1; // <----
  var fil = document.getElementById("FileUpload" + startUpload.count++);

  if(!fil || fil.value.length == 0) {    
    alert("Finished!");
    document.forms[0].reset();
    startUpload.count = 1; // <----
    return;
  }

  disableAllFileInputs();
  fil.disabled = false;
  alert("Uploading file " + startUpload.count);
  document.forms[0].submit();
};

Ich bin mir nicht sicher, warum uploadCount++; if(uploadCount > 1) ... notwendig ist, da es so aussieht, als ob die Bedingung immer wahr sein wird. Wenn Sie jedoch globalen Zugriff auf die Variable benötigen, können Sie dies mit der oben beschriebenen Funktionseigenschaft -Methode tun, ohne dass die Variable tatsächlich global ist.

<iframe src="test.htm" name="postHere" id="postHere"
  onload="startUpload.count++; if (startUpload.count > 1) startUpload();"></iframe>

Wenn dies jedoch der Fall ist, sollten Sie wahrscheinlich ein Objektliteral oder ein instanziiertes Objekt verwenden und wie gewohnt vorgehen OO (wobei Sie das Modulmuster verwenden können, wenn es Ihnen gefällt) .

Manchmal ist es sinnvoll, globale Variablen in JavaScript zu haben. Aber lass sie nicht so direkt am Fenster hängen.

Erstellen Sie stattdessen ein einzelnes "Namespace" -Objekt, das Ihre globalen Elemente enthält. Setzen Sie für Bonuspunkte alles ein, einschließlich Ihrer Methoden.

window.onload = function() {
  var frm = document.forms[0];
  frm.target = "postMe";
  frm.onsubmit = function() {
    frm.onsubmit = null;
    var uploader = new LazyFileUploader();
    uploader.startUpload();
    return false;
  }
}

function LazyFileUploader() {
    var uploadCount = 0;
    var total = 10;
    var prefix = "FileUpload";  
    var upload = function() {
        var fil = document.getElementById(prefix + uploadCount);

        if(!fil || fil.value.length == 0) {    
            alert("Finished!");
            document.forms[0].reset();
            return;
         }

        disableAllFileInputs();
        fil.disabled = false;
        alert("Uploading file " + uploadCount);
        document.forms[0].submit();
        uploadCount++;

        if (uploadCount < total) {
            setTimeout(function() {
                upload();
            }, 100); 
        }
    }

    this.startUpload = function() {
        setTimeout(function() {
            upload();
        }, 100);  
    }       
}

Eine andere Möglichkeit besteht darin, ein Objekt zu erstellen und ihm dann Methoden hinzuzufügen.

var object = {
  a = 21,
  b = 51
};

object.displayA = function() {
 console.log(object.a);
};

object.displayB = function() {
 console.log(object.b);
};

Auf diese Weise wird nur das Objekt 'obj' verfügbar gemacht und Methoden daran angehängt. Dies entspricht dem Hinzufügen im Namespace.

Einige Dinge werden sich im globalen Namespace befinden - nämlich welche Funktion Sie auch immer aus Ihrem Inline-JavaScript-Code aufrufen.

Im Allgemeinen besteht die Lösung darin, alles in einem Verschluss zu verpacken:

(function() {
    var uploadCount = 0;
    function startupload() {  ...  }
    document.getElementById('postHere').onload = function() {
        uploadCount ++;
        if (uploadCount > 1) startUpload();
    };
})();

und vermeiden Sie den Inline-Handler.

Die Verwendung von Verschlüssen ist möglicherweise für kleine bis mittlere Projekte in Ordnung. Bei großen Projekten empfiehlt es sich jedoch, den Code in Module aufzuteilen und in verschiedenen Dateien zu speichern.

Deshalb habe ich jQuery Secret plugin geschrieben, um das Problem zu lösen.

In Ihrem Fall würde der Code mit diesem Plugin wie folgt aussehen.

JavaScript:

// Initialize uploadCount.
$.secret( 'in', 'uploadCount', 0 ).

// Store function disableAllFileInputs.
secret( 'in', 'disableAllFileInputs', function(){
  // Code for 'disable all file inputs' goes here.

// Store function startUpload
}).secret( 'in', 'startUpload', function(){
    // 'this' points to the private object in $.secret
    // where stores all the variables and functions
    // ex. uploadCount, disableAllFileInputs, startUpload.

    var fil = document.getElementById( 'FileUpload' + uploadCount);

    if(!fil || fil.value.length == 0) {
        alert( 'Finished!' );
        document.forms[0].reset();
        return;
    }

    // Use the stored disableAllFileInputs function
    // or you can use $.secret( 'call', 'disableAllFileInputs' );
    // it's the same thing.
    this.disableAllFileInputs();
    fil.disabled = false;

    // this.uploadCount is equal to $.secret( 'out', 'uploadCount' );
    alert( 'Uploading file ' + this.uploadCount );
    document.forms[0].submit();

// Store function iframeOnload
}).secret( 'in', 'iframeOnload', function(){
    this.uploadCount++;
    if( this.uploadCount > 1 ) this.startUpload();
});

window.onload = function() {
    var frm = document.forms[0];

    frm.target = "postMe";
    frm.onsubmit = function() {
        // Call out startUpload function onsubmit
        $.secret( 'call', 'startUpload' );
        return false;
    }
}

Relevante Auszeichnung:

<iframe src="test.htm" name="postHere" id="postHere" onload="$.secret( 'call', 'iframeOnload' );"></iframe>

Öffne dein Firebug , du wirst überhaupt keine Globals finden, nicht einmal die Funktion :)

Eine vollständige Dokumentation finden Sie unter hier .

Eine Demo-Seite finden Sie unter this .

Quellcode auf GitHub .

Zum "Sichern" einzelner globaler Variablen:

function gInitUploadCount() {
    var uploadCount = 0;

    gGetUploadCount = function () {
        return uploadCount; 
    }
    gAddUploadCount= function () {
        uploadCount +=1;
    } 
}

gInitUploadCount();
gAddUploadCount();

console.log("Upload counter = "+gGetUploadCount());

Ich bin ein Anfänger von JS und benutze dies derzeit in einem Projekt. (Ich schätze jeden Kommentar und jede Kritik)

Verschlüsse verwenden. So etwas gibt Ihnen einen anderen Geltungsbereich als global.

(function() {
    // Your code here
    var var1;
    function f1() {
        if(var1){...}
    }

    window.var_name = something; //<- if you have to have global var
    window.glob_func = function(){...} //<- ...or global function
})();