1

警告！！私は徹底的に初心者です

さて、グローバル変数について多くの質問があったことは知っています。それが私が探しているものだと思いますが、正確ではありません。最近、同じコード行を何度も呼び出す必要がありました。document.getElementById("example").styleまたはそのようなささいなことに似ていますが、継続的に繰り返す必要があります。

私の質問は、これらの行を書く時間を節約するために、関数の外に 1 つの変数を作成する方法です。

私が見てきたのは、このように外に書くだけですvar inferno = document.getElementById("inferno");が、これはうまくいきません。

これは今の私のコードです。テストとして使用しただけなので簡単ですが、誰か助けてもらえますか?

var inferno = document.getElementById("inferno");


function infernoClick () {
    inferno.style.backgroundColor="red";
}
4

4 に答える 4

3

あなたは正しい考えを持っています。ただし、変数がglobalである必要はないことに注意してください。それを使用したいすべてのコードがそれを使用できる場所でなければなりません。

たとえば、これはグローバルを作成します。

<script>
var inferno = document.getElementById("inferno");

function infernoClick () {
    inferno.style.backgroundColor="red";
}

function somethingElse () {
    inferno.style.color="green";
}
</script>

(これは、要素を作成するマークアップの後である必要があることに注意してくださいinferno。)

グローバルの問題は、それらが互いに競合する可能性があることです。実際、グローバルな「名前空間」はすでに非常に混雑しています。

inferno次のように、スコープ関数で必要なコードをラップすることで、これを回避できます。

<script>
(function() {
    var inferno = document.getElementById("inferno");

    function infernoClick () {
        inferno.style.backgroundColor="red";
    }

    function somethingElse () {
        inferno.style.color="green";
    }
})();
</script>

そのコードは無名関数を作成し、すぐに呼び出して内部でコードを実行します。

現在inferno、それを必要とする関数に対して「グローバル」ですが、実際にはグローバルではありません。

さらに例を見てみましょう。

<script>
(function() {
    var outer = 42;

    function doSomethingCool() {
        var inner = 67;

        document.getElementById("someElement").onclick = function() {
            alert("inner = " + inner + ", outer = " + outer);
        };
    }

    // Can't use `inner` here, but can use `outer`
    alert("outer = " + outer);

    doSomethingCool();
})();
</script>

そのコードはスコープ関数ですべてをラップし、outer変数はそのスコープ関数内のどこからでもアクセスできます。また、doSomethingCoolという変数を持つ関数 がありますinner。inner内でのみアクセスできますdoSomethingCool。何が行われるか見てみましょう:がクリックdoSomethingCoolされたときのイベント ハンドラーをフックします。関数を呼び出すsomeElementのではなく、フックするだけです。

本当にクールなことは、後で誰かが要素をクリックすると、その関数がそのinner変数にアクセスできることです。

実際、これは関数に渡す引数にも当てはまります。最後の例:

<input type="button" id="element1" value="One">
<input type="button" id="element2" value="Two">
<script>
(function() {
    function hookItUp(id, msg) {
        document.getElementById(id).onclick = function() {
            alert(msg);
        };
    }

    hookItUp("element1", "This message is for element1");
    hookItUp("element2", "And this one is for element2");

})();
</script>

そこには、いくつかの引数を受け入れるこの関数があり、これclickを2 回呼び出しelement1ます。clickelement2

ここで本当にクールなことは、クリックがかなり後で発生したとしても、 has hookItUplong-since の呼び出しが返された後でも、呼び出したときに作成された関数は、hookItUp渡した引数に引き続きアクセスできることelement1です。 message is for element1" をクリックするとelement2、"And this one is for element2" が表示されます。

これらは閉鎖と呼ばれます。詳細については、私のブログをご覧ください: Closures are not complex

于 2013-08-08T21:06:45.830 に答える
1

例えば

var myGlobalVars = {"inferno":null,"othervar":null}; // globals in their own scope

function clickMe(varName,color) { // generic function
    myGlobalVars[varName].style.backgroundColor=color;
}

window.onload=function() {
  // initialise after the objects are available
  for (var o in myGlobalVars) myGlobalVars[o]=document.getElementById(o);
  // execute
  clickMe("inferno","red");
}

. .

于 2013-08-08T21:08:31.980 に答える