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

A bunch of my JavaScript code is in an external file called helpers.js. Inside the HTML that calls this JavaScript code I find myself in need of knowing if a certain function from helpers.js has been called.

我的一堆JavaScript代码位于名为helpers.js的外部文件中。在调用此JavaScript代码的HTML中，我发现自己需要知道是否已调用helpers.js中的某个函数。

I have attempted to create a global variable by defining:

我试图通过定义创建一个全局变量：

var myFunctionTag = true;

In global scope both in my HTML code and in helpers.js.

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

Heres what my html code looks like:

下面是我的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>

Is what I am trying to do even feasible?

我想做的甚至是可行的吗？

6 个解决方案

#1

102

You need to declare the variable before you include the helpers.js file. Simply create a script tag above the include for helpers.js and define it there.

在包含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>

#2

The variable can be declared in the .js file and simply referenced in the HTML file. My version of helpers.js:

该变量可以在.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");
    }
}

And a page to test it:

还有一个测试它的页面：

<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>

You'll see the test alert() will display two different things, and the value written to the page will be different the second time.

你会看到测试alert（）会显示两个不同的东西，写入页面的值第二次会有所不同。

#3

OK, guys, here's my little test too. I had a similar problem, so I decided to test out 3 situations:

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

One HTML file, one external JS file... does it work at all - can functions communicate via a global var?
一个HTML文件，一个外部JS文件......它是否可以工作 - 函数可以通过全局变量进行通信吗？
Two HTML files, one external JS file, one browser, two tabs: will they interfere via the global var?
两个HTML文件，一个外部JS文件，一个浏览器，两个选项卡：它们是否会通过全局变量进行干扰？
One HTML file, open by 2 browsers, will it work and will they interfere?
一个HTML文件，由2个浏览器打开，它会工作，它们会干扰吗？

All the results were as expected.

所有结果都符合预期。

It works. Functions f1() and f2() communicate via global var (var is in the external JS file, not in HTML file).
有用。函数f1（）和f2（）通过全局var进行通信（var在外部JS文件中，而不是在HTML文件中）。
They do not interfere. Apparently distinct copies of JS file have been made for each browser tab, each HTML page.
他们不会干涉。显然，每个浏览器选项卡，每个HTML页面都有不同的JS文件副本。
All works independently, as expected.
所有都按预期独立工作。

Instead of browsing tutorials, I found it easier to try it out, so I did. My conclusion: whenever you include an external JS file in your HTML page, the contents of the external JS gets "copy/pasted" into your HTML page before the page is rendered. Or into your PHP page if you will. Please correct me if I'm wrong here. Thanx.

我没有浏览教程，而是更容易尝试，所以我做到了。我的结论是：无论何时在HTML页面中包含外部JS文件，外部JS的内容都会在呈现页面之前“复制/粘贴”到HTML页面中。或者如果你愿意，进入你的PHP页面。如果我错了，请纠正我。感谢名单。

My example files follow:

我的示例文件如下：

EXTERNAL JS:

EXTERNAL 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:

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>

#4

I think you should be using "local storage" rather than global variables.

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

If you are concerned that "local storage" may not be supported in very old browsers, consider using an existing plug-in which checks the availability of "local storage" and uses other methods if it isn't available.

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

I used http://www.jstorage.info/ and I'm happy with it so far.

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

#5

You can make a json object like:

你可以创建一个json对象：

globalVariable={example_attribute:"SomeValue"};

in fileA.js

在fileA.js中

And access it from fileB.js like: globalVariable.example_attribute

并从fileB.js访问它，如：globalVariable.example_attribute

#6

Hi to pass values from one js file to another js file we can use Local storage concept

嗨，要将值从一个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 file

Two.js文件

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

 alert(test);
}

Three.js File

Three.js文件

localStorage.name = 1;

#1

102