複数のファイルにわたるJavaScriptのグローバル変数

130

私のJavaScriptコードの束は、helpers.jsという外部ファイルにあります。このJavaScriptコードを呼び出すHTMLの中で、helpers.jsの特定の関数が呼び出されたかどうかを知る必要があることに気づきました。

以下を定義してグローバル変数を作成しようとしました：

var myFunctionTag = true;

HTMLコードとhelpers.jsの両方のグローバルスコープ内。

私のhtmlコードは次のようになります：

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

私がやろうとしていることは実現可能ですか？

— 五郎
ソース

1

2番目のタグブロックでfalseに設定しただけです<script>。（helpers.jsファイルの前にvarを宣言せずに）2つの異なる方法を試したところ、どちらも機能しました。回答を投稿しますが、質問には重要な情報が欠けているようです。

— スティーブンP

window.onload = function（）{//コードを開始する}最善の解決策-これはSlowpokeと言えます:)

— Schoening

125

helpers.jsファイルを含める前に、変数を宣言する必要があります。helpers.jsのインクルードの上にスクリプトタグを作成し、そこで定義するだけです。

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>

— Tvanfosson
ソース

9

別のhtmlにロードされた別のjsからアクセスしようとすると、変数が宣言されていないと表示されるため、私には機能しません

— ACV

16

変数は.jsファイル内で宣言でき、HTMLファイル内で簡単に参照できます。私のバージョンhelpers.js：

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

そしてそれをテストするページ：

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

テストでalert()は2つの異なるものが表示され、ページに書き込まれる値は2回目に異なります。

— スティーブンP
ソース

15

はい、皆さん、これも私の小さなテストです。同様の問題があったため、3つの状況をテストすることにしました。

1つのHTMLファイル、1つの外部JSファイル...それはまったく機能しますか？関数はグローバル変数を介して通信できますか？
2つのHTMLファイル、1つの外部JSファイル、1つのブラウザー、2つのタブ：グローバル変数を介して干渉しますか？
2つのブラウザで開いた1つのHTMLファイルは機能しますか？

すべての結果は予想通りでした。

できます。関数f1（）およびf2（）は、グローバルvarを介して通信します（varは、HTMLファイルではなく、外部JSファイルにあります）。
それらは干渉しません。JSファイルの明確に異なるコピーが、各ブラウザタブ、各HTMLページに対して作成されています。
予想どおり、すべてが独立して動作します。

チュートリアルを閲覧する代わりに、試してみるほうが簡単だと思ったので、実際に試してみました。私の結論：HTMLページに外部JSファイルを含めると、ページがレンダリングされる前に、外部JSのコンテンツがHTMLページに「コピー/貼り付け」されます。または、PHPページに追加します。ここが間違っている場合は修正してください。ありがとう。

私のサンプルファイルは次のとおりです。

外部JS：

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

— マーティン
ソース

1

HTML 1とHTML 2は同じです（ページタイトルを除いて）...それでも、物理的に分離するために2つのファイルを作成しました。

— マーティン

1

グローバル変数ではなく「ローカルストレージ」を使用する必要があると思います。

「ローカルストレージ」が非常に古いブラウザでサポートされていないことが懸念される場合は、「ローカルストレージ」の可用性をチェックし、利用できない場合は他の方法を使用する既存のプラグインの使用を検討してください。

http://www.jstorage.info/を使用しましたが、今のところ満足しています。

— paulo62
ソース

1

次のようなjsonオブジェクトを作成できます。

globalVariable={example_attribute:"SomeValue"};

fileA.js

そして、fileB.jsから次のようにアクセスします。 globalVariable.example_attribute

— パルチザノス
ソース

1

こんにちは、あるjsファイルから別のjsファイルに値を渡すために、ローカルストレージの概念を使用できます

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Two.jsファイル

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Three.jsファイル

localStorage.name = 1;

— サジス
ソース

1

ノードを使用している場合：

値を宣言するためのファイルを作成しますvalues.js。

export let someValues = {
  value1: 0
}

次に、必要に応じて、それが使用されている各ファイルの上部にインポートします（例：）file.js：

import { someValues } from './values'

console.log(someValues);

— ジャレッド・ウィルバー
ソース

-1

// Javascriptファイル1

localStorage.setItem('Data',10);

// Javascriptファイル2

var number=localStorage.getItem('Data');

JSファイルをHTMLでリンクすることを忘れないでください:)

— MrJ
ソース