Biz global variables bir şey ama en iyi yöntem olduğunu biliyorum. Ama onlar olmadan kod zor olduğu durumlarda birçok örnekleri vardır. Teknikleri global değişken kullanımı önlemek için ne kullanıyorsunuz?

Örneğin, aşağıdaki senaryoyu göz önüne alındığında, ne global bir değişken kullanmak ister misin?

Kod JavaScript:

var uploadCount = 0;

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

    frm.target = "postMe";
    frm.onsubmit = function() {
        startUpload();
        return false;
    }
}

function startUpload() {
    var fil = document.getElementById("FileUpload"   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();
}

İlgili işaretleme:

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

<!-- MUST use inline JavaScript here for onload event
     to fire after each form submission. -->

Bu kodu birden fazla <input type="file"> web form geliyor. Dosyaları bir defada bir büyük istekleri önlemek için yüklemeler. İframe için POSTıng ile bu iframe yüklendiğinde harekete yanıt bekliyor, ve sonra bir sonraki bildirim tetikler.

Bu örnek özellikle cevap vermek zorunda değilsin, sadece bir şekilde küresel değişkenler önlemek için düşünmek kuramıyorum bir durum için referans olarak sunuyorum.

En kolay yolu bir kapatma kodunuzu sarın ve el ile global kapsam için küresel ihtiyacın sadece bu değişkenleri ortaya çıkarmak için

(function() {
    // Your code here

    // Expose to global
    window['varName'] = varName;
})();

Senaryoya göre, küresel değişkenler tamamen kaldırmak için geliştirici şeyler soru olarak kabul edilen bir dizi değişiklik gerekiyor. Hilal Taze yorum adresi: Bunun gibi daha bir sürü şey olurdu

Javascript:

(function() {
    var addEvent = function(element, type, method) {
        if('addEventListener' in element) {
            element.addEventListener(type, method, false);
        } else if('attachEvent' in element) {
            element.attachEvent('on'   type, method);

        // If addEventListener and attachEvent are both unavailable,
        // use inline events. This should never happen.
        } else if('on'   type in element) {
            // If a previous inline event exists, preserve it. This isn't
            // tested, it may eat your baby
            var oldMethod = element['on'   type],
                newMethod = function(e) {
                    oldMethod(e);
                    newMethod(e);
                };
        } else {
            element['on'   type] = method;
        }
    },
        uploadCount = 0,
        startUpload = function() {
            var fil = document.getElementById("FileUpload"   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();
        };

    addEvent(window, 'load', function() {
        var frm = document.forms[0];

        frm.target = "postMe";
        addEvent(frm, 'submit', function() {
            startUpload();
            return false;
        });
    });

    var iframe = document.getElementById('postHere');
    addEvent(iframe, 'load', function() {
        uploadCount  ;
        if(uploadCount > 1) {
            startUpload();
        }
    });

})();

HTML:

<iframe src="test.htm" name="postHere" id="postHere"></iframe>

Değilsingerek<iframe>, satır içi bir olay işleyicisi hala bu kod ile her bir yük ateş.

Load olayı ile ilgili

Burada bir test çalışması onload satır içi bir olay ihtiyacın olmadığını gösteren. Bu aynı sunucu üzerinde bir dosya (/) emptypage.php başvuran bağlıdır, aksi takdirde sadece bir sayfa içine bu yapıştırın ve çalıştırın gerekir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        (function() {
            var addEvent = function(element, type, method) {
                if('addEventListener' in element) {
                    element.addEventListener(type, method, false);
                } else if('attachEvent' in element) {
                    element.attachEvent('on'   type, method);

                    // If addEventListener and attachEvent are both unavailable,
                    // use inline events. This should never happen.
                } else if('on'   type in element) {
                    // If a previous inline event exists, preserve it. This isn't
                    // tested, it may eat your baby
                    var oldMethod = element['on'   type],
                    newMethod = function(e) {
                        oldMethod(e);
                        newMethod(e);
                    };
                } else {
                    element['on'   type] = method;
                }
            };

            // Work around IE 6/7 bug where form submission targets
            // a new window instead of the iframe. SO suggestion here:
            // http://stackoverflow.com/q/875650
            var iframe;
            try {
                iframe = document.createElement('<iframe name="postHere">');
            } catch (e) {
                iframe = document.createElement('iframe');
                iframe.name = 'postHere';
            }

            iframe.name = 'postHere';
            iframe.id = 'postHere';
            iframe.src = '/emptypage.php';
            addEvent(iframe, 'load', function() {
                alert('iframe load');
            });

            document.body.appendChild(iframe);

            var form = document.createElement('form');
            form.target = 'postHere';
            form.action = '/emptypage.php';
            var submit = document.createElement('input');
            submit.type = 'submit';
            submit.value = 'Submit';

            form.appendChild(submit);

            document.body.appendChild(form);
        })();
    </script>
</body>
</html>

Uyarı Safari, Firefox, 6, 7 ve 8 YANİ her zaman ben Gönder düğmesini harekete.