.jsファイルでグローバル変数を宣言する方法

Question 1

すべての.jsファイルに必要ないくつかのグローバル変数が必要です。

たとえば、次の4つのファイルについて考えてみます。

global.js
js1.js
js2.js
js3.js

上記の4つのファイルすべてをHTMLドキュメントにロードすることを考慮してglobal.js、3つのグローバル変数を宣言し、他の3つの.jsファイルのいずれかでそれらにアクセスする方法はありますか？

これが可能かどうか、またはこれを達成するための回避策があるかどうか誰かに教えてもらえますか？

Question 2

関数スコープ外のglobal.jsで変数を定義するだけです。

// global.js
var global1 = "I'm a global!";
var global2 = "So am I!";

// other js-file
function testGlobal () {
    alert(global1);
}

これが機能することを確認するには、そのファイルで定義されている変数にアクセスする前に、global.jsをインクルード/リンクする必要があります。

<html>
    <head>
        <!-- Include global.js first -->
        <script src="/YOUR_PATH/global.js" type="text/javascript"></script>
        <!-- Now we can reference variables, objects, functions etc. 
             defined in global.js -->
        <script src="/YOUR_PATH/otherJsFile.js" type="text/javascript"></script>
    </head>
    [...]
</html>

もちろん、jsファイルのロードによって最初のページのロードが中断されないようにする場合は、終了<body>タグの直前にスクリプトタグをリンクすることができます。

Question 3

推奨されるアプローチは次のとおりです。

window.greeting = "Hello World!"

その後、任意の関数内でアクセスできます。

function foo() {

   alert(greeting); // Hello World!
   alert(window["greeting"]); // Hello World!
   alert(window.greeting); // Hello World! (recommended)

}

このアプローチは、2つの理由で推奨されます。

意図は明確です。varキーワードを使用すると、varsローカルを意図したグローバルを宣言したり、その逆を簡単に宣言したりできます。この種の変数スコープは、多くのJavascript開発者にとって混乱のポイントです。したがって、原則として、すべての変数宣言の前にキーワードvarまたはプレフィックスが付いていることを確認しますwindow。
この方法で変数を読み取るためにこの構文を標準化します。つまり、ローカルスコープvarがグローバルを覆い隠しvarたり、その逆を行ったりすることはありません。たとえば、ここで何が起こるかはあいまいです。

 greeting = "Aloha";

 function foo() {
     greeting = "Hello"; // overrides global!
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // does it alert "Hello" or "Howdy" ?

ただし、これははるかにクリーンでエラーが発生しにくいです（すべての変数スコープルールを覚えておく必要はありません）。

 function foo() {
     window.greeting = "Hello";
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // alerts "Howdy"

Question 4

試しましたか？

もしあなたがそうするなら：

var HI = 'Hello World';

でglobal.js。そして、次のことを行います。

alert(HI);

その中でjs1.jsそれはうまく警告します。global.jsHTMLドキュメントに残りの前に含める必要があります。

唯一の落とし穴は、ウィンドウのスコープ内で（関数内ではなく）宣言する必要があることです。

varパーツを修正してそのように作成することもできますが、それは良い習慣ではありません。

Question 5

上記のように、スクリプトファイルで最上位のスコープを使用することには問題があります。別の問題があります。スクリプトファイルは、一部のランタイム環境ではグローバルコンテキストではないコンテキストから実行される可能性があります。

グローバルをwindow直接割り当てることが提案されています。ただし、これも実行時に依存し、ノードなどでは機能しません。これは、ポータブルグローバル変数管理には慎重な検討と追加の作業が必要であることを示しています。多分彼らは将来のECMSバージョンでそれを修正するでしょう！

今のところ、すべてのランタイム環境で適切なグローバル管理をサポートするには、次のようなものをお勧めします。

/**
 * Exports the given object into the global context.
 */
var exportGlobal = function(name, object) {
    if (typeof(global) !== "undefined")  {
        // Node.js
        global[name] = object;
    }
    else if (typeof(window) !== "undefined") {
        // JS with GUI (usually browser)
        window[name] = object;
    }
    else {
        throw new Error("Unkown run-time environment. Currently only browsers and Node.js are supported.");
    }
};


// export exportGlobal itself
exportGlobal("exportGlobal", exportGlobal);

// create a new global namespace
exportGlobal("someothernamespace", {});

これはもう少しタイピングですが、グローバル変数管理を将来にわたって利用できるようにします。

免責事項：このアイデアの一部は、stacktrace.jsの以前のバージョンを見るときに思いついたものです。

Webpackやその他のツールを使用して、ランタイム環境の信頼性を高め、ハッキングの少ない検出を行うこともできると思います。

Question 6

はい、アクセスできます。'パブリックスペース'（関数の外）で次のように宣言する必要があります。

var globalvar1 = 'value';

後で、他のファイルからもアクセスできます。