2009-06-03 36 views
76

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

たとえば、以下の4つのファイルを考えてみます。

  1. global.js
  2. js1.js
  3. js2.js
  4. js3.js

は、私は3つのグローバル変数を宣言することができる方法がありますglobal.jsのいずれかにアクセスしてください彼は他の3 .jsファイルを考慮して上記の4つのファイルをすべてHTML文書にロードしますか?

これが可能かどうか、またはこれを回避するための回避策がありますか?

答えて

84

ただ、関数スコープ外のglobal.jsであなたの変数を定義します。

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

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

をこれは、あなたがその中で定義されたすべての変数にアクセスしようとする前に、global.jsへ/リンクを含める必要が動作することを確認するためにファイル:あなたは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> 

あなたは可能性は、もちろん、スクリプト内のリンクは、単に閉じ<体> -tag前にタグ付けします。

+4

この回答は正しいですが、Google Javascriptの変数スコープを使用することをお勧めします。 – aleemb

+1

合意。私はいつも共通の "名前空間"内のすべての関数と変数をスコープして、混乱や矛盾を避けるようにしています。通常、私はそれをプロジェクトまたは会社の略奪として名付けます。 – PatrikAkerstrand

+0

グローバル変数がグローバルスコープで作成されることを前提としており、変数の最初の言及が他のすべての言及の前にグローバルスコープ内にあることを前提としているため、 – Andrew

6

試しましたか?

そうした場合:global.js

var HI = 'Hello World'; 

。次に:

alert(HI); 

js1.jsで、それは正常に警告します。残りの部分の前にHTML文書にglobal.jsを含めるだけです。

唯一のキャッチは、ウィンドウ内のスコープ内で(関数内ではなく)宣言する必要があることです。

varの部分をちょうどおかしな方法で作成することもできますが、それは良い方法ではありません。

2

はい、アクセスできます。次のように「公共空間」(関数外)に宣言する必要があります。

var globalvar1 = 'value'; 

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

78

推奨アプローチがある:あなたはその後、任意の関数内でそれにアクセスすることができます

window.greeting = "Hello World!" 

function foo() { 

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

} 

このアプローチは、二つの理由から好ましいです。

  1. インテントは明示的です。キーワードvarを使用すると、ローカルであることを意図したグローバルvarsが宣言されることがあります。この種の変数スコープは、多くのJavascript開発者にとって混乱の原因となります。したがって、一般的なルールとして、すべての変数宣言の前にキーワードvarまたは接頭辞windowが付いていることを確認します。

  2. このように変数を読み込むためにこの構文を標準化すると、ローカルスコープの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" 
+0

この種の宣言はX-Browserで動作しますか? – nottinhill

+0

ウィンドウに変数を付けることは、すべてのブラウザで機能するはずです(また、私が取るアプローチ、+1!)。 – Dandy

+1

@Dan、 "var testvar = 'hello';"と宣言した場合、関数の外では、自動的にウィンドウオブジェクトに追加され、 "window.testvar"でアクセスすることができます。 – zkent

3

前述のとおり、スクリプトファイルの最上位のスコープを使用する際に問題があります。別の問題があります。スクリプトファイルは、実行時環境によってはグローバルコンテキストではないコンテキストから実行される可能性があります。

グローバルを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を見ると、このアイデアの一部が私に届きました。私は、Bowerやその他のツールを使用して、ランタイム環境のより信頼性が高く、ハックの少ない検出を行うこともできます。

関連する問題