Jak uniknąć zmiennych globalnych w JavaScript?

Proponuję wzór modułu .

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

Po pierwsze, nie da się uniknąć globalnego JavaScript, coś zawsze będzie wisiało globalny zasięg. Nawet jeśli utworzysz przestrzeń nazw, co nadal jest dobrym pomysłem, ta przestrzeń nazw będzie globalna.

Zamknięcie

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

* zauważ, że inkrementacja uploadCount dzieje się wewnętrznie tutaj

Właściwość Funkcji

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

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

Jednakże, jeśli tak jest, to należy prawdopodobnie używaj obiektu dosłownego lub instancyjnego obiektu i rób to w normalny sposób OO (gdzie możesz użyć wzorca modułu, jeśli ci się spodoba).

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

Czasami sensowne jest posiadanie zmiennych globalnych w JavaScript. Ale nie zostawiaj ich zwisających z okna w ten sposób.

Zamiast tego utwórz pojedynczy obiekt "przestrzeni nazw", który będzie zawierał Twoje globale. Aby uzyskać punkty bonusowe, umieść tam wszystko, w tym swoje metody.

Niektóre rzeczy będą w globalnej przestrzeni nazw-mianowicie, niezależnie od funkcji, którą wywołujesz z wbudowanego kodu JavaScript.

Ogólnie rzecz biorąc, rozwiązaniem jest owinięcie wszystkiego w Zamknięcie:

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

I unikaj obsługi inline.

Używanie zamknięć może być OK dla małych i średnich projektów. Jednak w przypadku dużych projektów możesz podzielić kod na moduły i zapisać je w różnych plikach.

Dlatego napisałem jQuery Secret plugin aby rozwiązać problem.

W Twoim przypadku z tą wtyczką kod będzie wyglądał mniej więcej tak:

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

Odpowiedni znacznik:

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

Otwórz swój Firebug , nie znajdziesz żadnego globala, nawet funciton:)

Pełna dokumentacja znajduje się w tutaj .

Aby zobaczyć stronę demo, zobacz to .

Kod źródłowy na GitHub .

Innym sposobem jest utworzenie obiektu, a następnie dodanie do niego metod.

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

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

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

W ten sposób wyeksponowany jest tylko obiekt " obj " i dołączone do niego metody. Jest to równoznaczne z dodaniem go w przestrzeni nazw.

Użyj zamknięć. Coś takiego daje zasięg inny niż globalny.

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

Dla "zabezpieczenia" zmiennych globalnych:

function gInitUploadCount() {
    var uploadCount = 0;

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

gInitUploadCount();
gAddUploadCount();

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

Jestem nowicjuszem w JS, obecnie używam tego w jednym projekcie. (apreciate any comment and criticism)