Javascript中跨多个文件的全局变量
Posted
技术标签:
【中文标题】Javascript中跨多个文件的全局变量【英文标题】:Global variables in Javascript across multiple files 【发布时间】:2011-02-25 08:13:16 【问题描述】:我的一堆 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>
我正在尝试做的事情是否可行?
【问题讨论】:
好吧,您刚刚在第二个<script>
标记块中将其设置为false。我刚刚尝试了 2 种不同的方法(没有在 helpers.js 文件之前声明 var),它们都有效。我会发布一个答案,但您的问题中似乎缺少一些关键信息。
window.onload = function () //Start Your Code 最好的解决方案 - 这是Slowpoke说的:)
【参考方案1】:
您需要在包含 helpers.js 文件之前声明变量。只需在 helpers.js 的 include 上方创建一个脚本标记并在那里定义它。
<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>
【讨论】:
对我不起作用,因为当尝试从另一个 html 中加载的另一个 js 访问时,它说该变量未声明 请记住,如果您在脚本上使用defer
,它可能会因脚本未按您预期的顺序运行而失败【参考方案2】:
该变量可以在.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】:好的,伙计们,这也是我的小测试。我遇到了类似的问题,所以我决定测试 3 种情况:
-
一个 HTML 文件,一个外部 JS 文件...是否可以正常工作 - 函数可以通过全局变量进行通信吗?
两个 HTML 文件、一个外部 JS 文件、一个浏览器、两个选项卡:它们会通过全局变量进行干扰吗?
一个 HTML 文件,由 2 个浏览器打开,它会起作用吗?它们会干扰吗?
所有结果都符合预期。
-
有效。函数 f1() 和 f2() 通过全局 var 进行通信(var 在外部 JS 文件中,而不是在 HTML 文件中)。
他们不干涉。显然,每个浏览器选项卡、每个 HTML 页面都制作了不同的 JS 文件副本。
一切都按预期独立工作。
比起浏览教程,我发现尝试起来更容易,所以我这样做了。我的结论:每当您在 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>
【讨论】:
HTML 1 和 HTML 2 是相同的(除了页面标题)...不过,我制作了两个文件,只是为了让它们在物理上分开。【参考方案4】://Javascript文件1
localStorage.setItem('Data',10);
//Javascript文件2
var number=localStorage.getItem('Data');
别忘了在 html 中链接你的 JS 文件 :)
【讨论】:
【参考方案5】:您好,将值从一个 js 文件传递到另一个 js 文件,我们可以使用本地存储概念
<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;
【讨论】:
【参考方案6】:如果您使用的是节点:
-
创建文件来声明值,比如说它叫做
values.js
:
export let someValues =
value1: 0
然后根据需要在每个文件的顶部导入它(例如,file.js
):
import someValues from './values'
console.log(someValues);
【讨论】:
【参考方案7】:我认为您应该使用“本地存储”而不是全局变量。
如果您担心非常旧的浏览器可能不支持“本地存储”,请考虑使用现有插件来检查“本地存储”的可用性,如果不可用,请使用其他方法。
我使用了http://www.jstorage.info/,到目前为止我很满意。
【讨论】:
【参考方案8】:你可以像这样创建一个 json 对象:
globalVariable=example_attribute:"SomeValue";
在文件A.js 中
并从 fileB.js 访问它,例如:
globalVariable.example_attribute
【讨论】:
【参考方案9】:您可以设置
window['yourVariableName'] = yourVariable;
它将使该变量对所有文件都是全局的。
【讨论】:
这对我不起作用以上是关于Javascript中跨多个文件的全局变量的主要内容,如果未能解决你的问题,请参考以下文章