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

时间:2010-05-28 21:54:58

标签: javascript scope global-variables global

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

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

8 个答案:

答案 0 :(得分:112)

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

答案 1 :(得分: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 :(得分:15)

好的,大家好,这也是我的小测试。我有类似的问题,所以我决定测试3种情况:

  1. 一个HTML文件,一个外部JS文件......它是否可以工作 - 函数可以通过全局变量进行通信吗?
  2. 两个HTML文件,一个外部JS文件,一个浏览器,两个标签:它们是否会通过全局变量进行干扰?
  3. 一个HTML文件,由2个浏览器打开,它会起作用吗?它们会干扰吗?
  4. 所有结果都符合预期。

    1. 有效。函数f1()和f2()通过全局var进行通信(var在外部JS文件中,而不是在HTML文件中)。
    2. 他们不会干涉。显然,每个浏览器选项卡,每个HTML页面都有不同的JS文件副本。
    3. 所有工作都是独立的,如预期的那样。
    4. 我没有浏览教程,而是发现尝试它更容易,所以我做到了。我的结论是:无论何时在HTML页面中包含外部JS文件,外部JS的内容都会在呈现页面之前“复制/粘贴”到HTML页面中。或者如果你愿意,进入你的PHP页面。 如果我错了,请纠正我。 Thanx。

      我的示例文件如下:

      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:

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

答案 3 :(得分: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;

答案 4 :(得分:1)

如果您使用的是节点:

  1. 创建文件以声明值,称其为values.js
export let someValues = {
  value1: 0
}

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

import { someValues } from './values'

console.log(someValues);

答案 5 :(得分:0)

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

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

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

答案 6 :(得分:0)

您可以创建一个json对象:

globalVariable={example_attribute:"SomeValue"}; 
在fileA.js中

从fileB.js访问它,如: globalVariable.example_attribute

答案 7 :(得分:0)

// Javascript文件1

localStorage.setItem('Data',10);

// Javascript文件2

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

别忘了用html链接您的JS文件:)