web-dev-qa-db-ja.com

WebページのどこでグローバルJavaScript変数を宣言しますか？

ページで実行されるすべてのコードに表示される必要がある変数を初期化するJavaScriptコードのスニペットをどこに配置する必要がありますか？ （たとえば、要素のイベントハンドラーはこの変数にアクセスする必要があります）。

javascriptglobal-variables
11
Tony the Pony

これは、任意の関数から実行することも、「var」キーワードを使用せずに関数内で実行することもできます。スクリプトが値を読み取れるように、他のスクリプト（おそらくページの最上部）の前に割り当てます。

含まれているJSファイルに配置することもできますが、グローバル値を簡単に確認できるため、通常はページに正しく配置する方が使いやすく、サーバー側のコードでページごとに変更できます。また、本文にグローバル変数を割り当てないようにしてください。混乱を招き、読みにくくなります。

<head>
    <script>
        var numberOfDucks = 1000; // Global

        function some_function() {
            // numberOfDucks is accessible here
            alert (numberOfDucks);
            //  until you mask it by defining a local variable using the 'var' keyword
            var myLocal = 0; // is a local
            anotherGlobal = 0; // is a global
        }
    </script>

    <script>
        // potentially some other script
    </script>

    <script src="even_more_script.js">
</head>

関数でグローバルを定義すること（暗黙のグローバル）は、多くの混乱を招くため、お勧めできません。

12
SuperDuck

のみグローバル変数を持たない方法は、関数のスコープでvarキーワードを使用することです。それ以外はグローバル変数です。

(function() {
  var local = 5;
})();

関数がリテラルであるか関数定義であるかは関係ありません、それは持っているある種の関数である必要があります。

グローバル変数の例：

1：

var global = 5;

上記は関数スコープに含まれていないため、varが使用されている場合でもグローバルです。

2。

(function() {
   global = 5;
})();

上記では、varが使用されていないため、暗黙のグローバルになります。

。

function foo(){}

fooは、別の関数内で定義されておらず、オブジェクトキーに割り当てられていないため、グローバルにアクセスできます。

4。

(function() {
   var local = global = 5;
})();

varで複数の割り当てを行う場合、最初の変数のみがローカルになります...したがって、globalはグローバル変数であり、5に相当します。

5。

window.foo = 5;

接頭辞window.は、ブラウザのコンテキストでグローバル変数を定義する明示的な方法です。

6。

this.x = 5;

ブラウザのデフォルトでは、this以外のオブジェクトにアタッチされているメソッドを使用していない限り、windowはDOMWindowを指します。 ＃5と同じです。 XMLHttpRequestのようなメソッドを使用する場合、コンテキストはウィンドウのものであることに注意してください。

7。

with ( window ) { name = 'john'; }

withステートメントを使用し、すでにプロパティを持っているオブジェクトを参照しない場合、グローバル変数が定義されます。一般に、withキーワードの使用は避けるのが最善です。

結論：

個人的には、コードを無名関数スコープに保持し、必要に応じてのみグローバルを明示的に宣言します。

(function() {

   var governor = 'Schwarzenegger',
       state = 'California';

   window.president = 'Obama';
})();

上記では、governor変数とstate変数を定義し、それらは私の関数に対してローカルです。 presidentをグローバル変数として明示的に定義したいと思います。このように、グローバルとして定義した変数について混乱することはありません。明示的にwindow.をプレフィックスとして付けているからです。

26
meder omuraliev

その変数をページの先頭に配置することもできますが（どこにでも表示する必要がある場合はグローバルスコープ内に）、2つのことをお勧めします

1）スクリプトブロックを開く必要があるため、スクリプトはレンダリングをブロックするため、ページの本文内で宣言しないでください。したがって、</head>の直前に配置してください

2）単純な変数を作成することは避けますが、代わりに名前空間を使用して、識別子の衝突のリスクを減らします

<script>
var YOUR_APP_NS = {};
YOUR_APP_NS.yourvar = ....
</script>

これは、グローバルスコープを汚染しないための良い習慣です。この方法で複数のパブリック変数が必要な場合は、次のように記述できます。

YOUR_APP_NS.yourvar1 = ....
YOUR_APP_NS.yourvar2 = ....
YOUR_APP_NS.yourvarN = ....

しかし、グローバル変数はまだ1です

3
fcalderan

関数のいずれかを使用して変数を宣言します。そうすれば、グローバル変数になります。

これはグローバル変数の例です。最初の関数はグローバルを使用しますが、2番目の関数はグローバルをマスクする同じ名前のローカル変数を使用します。

var globalVar = 1;

function testFunc1 () {
    globalVar = 2; //Updates the global variable
}

function testFunc2 () {
    var globalVar = 5; // This variable masks the global and only updates within the scope of this function
    globalVar = 3;
}

また、スニペットは他の参照の前にグローバルを初期化する必要があるとおっしゃいました。このために、スクリプトブロックまたはjavascriptファイルへの参照を、要素内の他のjavascript参照のできるだけ前に配置することをお勧めします。グローバル変数に依存する他のJavaScriptファイルがある場合は、ページの残りの部分が最初にdefer属性を使用してロードされるまで、それらがロードされないようにすることができます。以下を参照してください。

<script src="dependant.js" type="text/javascript" defer="defer"></script>

もう1つのオプションは、最初のスクリプトがロードされた後、依存スクリプトを動的に追加することです。次のようにjQueryのようなものを使用してこれを行うことができます：

$(window).load( function() {
    $.getScript('dependant.js');
});
1
Brian Scott
<head>
<script>
    var b = 0;
</script>
<script src="...">
</head>
<body>
    ...
</body>
0
Floyd