Javascript 中跨多个文件的全局变量

我的一些 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>

我想做的事情可行吗？

277303 次浏览
小开
最佳答案

在包含 helpers.js 文件之前，需要声明该变量。只需在 include for 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>
小开

变量可以在 .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()将显示两个不同的内容，第二次写入页面的值将不同。

小开

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

  1. 一个 HTML 文件，一个外部的 JS 文件... 它是否可以工作-可以通过一个全局变量通信的函数？
  2. 两个 HTML 文件，一个外部 JS 文件，一个浏览器，两个选项卡: 它们会通过全局变量进行干扰吗？
  3. 一个 HTML 文件，由两个浏览器打开，它会工作，他们会干扰吗？

所有的结果都在预料之中。

  1. 有用。函数 f1()和 f2()通过 global var 进行通信(var 在外部 JS 文件中，而不在 HTML 文件中)。
  2. 显然，每个浏览器标签页、每个 HTML 页面都有不同的 JS 文件副本。
  3. 如预期的那样，所有工作都是独立进行的。

与浏览教程不同，我发现尝试它更容易，所以我这样做了。我的结论是: 无论何时在 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>
小开

我认为应该使用“本地存储”而不是全局变量。

如果您担心在非常老的浏览器中可能不支持“本地存储”，可以考虑使用现有的插件来检查“本地存储”的可用性，如果不可用，则使用其他方法。

我用的是 http://www.jstorage.info/，到目前为止我很满意。

小开

您可以创建一个 json 对象，比如:

globalVariable={example_attribute:"SomeValue"};

在 fileA.js 中

然后从文件 B.js 访问它，比如: globalVariable.example_attribute

小开

Hi 将值从一个 js 文件传递到另一个 js 文件，我们可以使用 Local 存储概念

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

两个 js 文件

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


alert(test);
}

三个 js 文件

localStorage.name = 1;
小开

//Javascript 文件1

localStorage.setItem('Data',10);

//Javascript 文件2

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

不要忘记在 html 中链接你的 JS 文件:)

小开

如果使用 node:

  1. 创建一个文件来声明值，比如它的名字是 values.js:
export let someValues = {
value1: 0
}

然后根据需要将其导入到每个使用它的文件的顶部(例如，file.js) :

import { someValues } from './values'


console.log(someValues);
小开

你可以设置 window['yourVariableName'] = yourVariable; 它会让这个变量对所有文件都是全局的。


提交答案