BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptでグローバル変数を避けるには？

2023-05-01 16:20:12

質問

私たちは皆、次のことを知っています。 グローバル変数 がベストプラクティスでないことは誰もが知っています。しかし、グローバル変数なしでコーディングすることが困難な場合がいくつかあります。あなたは、グローバル変数の使用を避けるためにどのようなテクニックを使っていますか？

例えば、次のようなシナリオがあった場合、どのようにグローバル変数を使用しないようにしますか？

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

関連するマークアップ。 

<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. -->

このコードは、ウェブフォームに複数の <input type="file"> . 巨大なリクエストを避けるために、一度にひとつずつファイルをアップロードしています。これを行うには POST を送信し、iframe の onload を起動するレスポンスを待ち、次の送信をトリガします。

この例に特に答える必要はありません。私は、グローバル変数を回避する方法を考えることができない状況への参考のために、この例を提供しているだけです。

どのように解決するのですか？

最も簡単な方法は、コードをクロージャでラップして、グローバルに必要な変数だけを手動でグローバルスコープに公開することです。 

(function() {
    // Your code here

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

三日月フレッシュのコメント：シナリオからグローバル変数を完全に削除するためには、開発者は質問で想定されている多くのことを変更する必要があります。それは、より多くこのように見えるでしょう。

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>

あなたは <強い が必要です。 のインラインイベントハンドラは必要ありません。 <iframe> にインライン・イベント・ハンドラが必要ですが、このコードではロードのたびに発生します。

ロードイベントに関して

以下は、インラインの onload イベントが必要ないことを示すテストケースです。これは、同じサーバー上のファイル (/emptypage.php) を参照することに依存しますが、そうでなければ、これをページに貼り付けて実行することができるはずです。 

<!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>

Safari、Firefox、IE 6、7、8で送信ボタンをクリックするたびにアラートが発生します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します