关于范围：跨多个文件的Javascript中的全局变量

Global variables in Javascript across multiple files

我的一些javascript代码在一个名为helpers.js的外部文件中。在调用这个javascript代码的HTML中，我发现自己需要知道是否调用了helpers.js中的某个函数。

我试图通过定义以下内容来创建全局变量：

1	var myFunctionTag = true;

在我的HTML代码和helpers.js中的全局范围内。

我的HTML代码如下所示：

1
2
3
4
5
6
7
8

<html>
...
<script type='text/javascript' src='js/helpers.js'>
...

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

我想做的是可行的吗？

相关讨论

变量可以在.js文件中声明，并在HTML文件中简单引用。我的helpers.js版本：

1
2
3
4
5
6
7
8
9
10
11
12

var myFunctionWasCalled = false;

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

还有一个测试页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

<body>

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

</p>

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

<p>
Some stuff in between
</p>

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

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

</p>

</body>
</html>

您将看到测试alert()将显示两个不同的内容，第二次写入页面的值将不同。

好了，伙计们，这也是我的小测试。我也遇到了类似的问题，所以我决定测试3种情况：

一个HTML文件，一个外部JS文件…它能工作吗？功能能通过一个全局变量进行通信吗？

两个HTML文件、一个外部JS文件、一个浏览器和两个选项卡：它们会通过全局变量进行干扰吗？

一个HTML文件，由两个浏览器打开，它能工作吗？它们会干扰吗？

所有结果与预期一致。

它起作用了。函数f1()和f2()通过全局变量进行通信(var在外部JS文件中，而不是在HTML文件中)。

他们不干涉。显然，已经为每个浏览器选项卡、每个HTML页面制作了不同的JS文件副本。

一切按预期独立工作。

与浏览教程不同，我发现更容易尝试，所以我做到了。我的结论是：无论何时在HTML页面中包含外部JS文件，外部JS的内容在呈现页面之前都会"复制/粘贴"到HTML页面中。如果愿意的话，也可以进入PHP页面。如果我错了，请纠正我。谢谢。

我的示例文件如下：

外部JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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">
External JS Globals - index.php
</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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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">
External JS Globals - index2.php
</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>