如何在一个 Javascript 文件中授予对另一个文件中定义的变量的访问权限

Question

将一个js文件中的变量放在另一个js文件的范围内的最简单方法是什么。之前有人问过这个问题，也给出了答案。但我不满意，因为（1）解释对我来说并不简单，（2）解决方案对我来说并不简单。一个 answer was "As long as the global variable has been put into global scope before it is called by the external script." OP 问 "how do I put the global variable into global scope?"，没有直接回答。

所以，我有：

test1.js

var a = true;

test2.js

alert("a is " + a);
console.log("a is " + a);

和

test.html

<html>
  <body>
    <h1>Test</h1>
  </body>

  <script src="js/test1.js"></script>
  <script src="js/test2.js"></script>
</html>

没有出现警报，控制台记录 ReferenceError: a is not defined。

使变量 a 在 test2.js 中可用的最简单方法是什么？

Answer 1

删除 var 通常会使变量成为全局变量。然而，"Global" 在基于浏览器的 JavaScript 的情况下，仅意味着 "window"，因此设置 window.myVar = "something" 与没有 [=10] 的 myVar = "something" 具有相同的效果=] 就可以了。

Answer 2

在 Javascript 中，在函数外部声明的变量是 Global。在HTML中，Javascript变量的范围是window，如果是global。 var 关键字不会改变变量是否为 global。

当您在函数内部定义一个变量时，该变量是函数的 local，除非您将它分配给 [=51= 的 window object ] 或将值分配给已声明的全局变量。

在下面的代码中，我们分配了一个全局变量a并将其设置为布尔值true。

我们输出一个警告来显示它是 true。

然后我们触发一个函数，将变量的值更改为 false。

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Variable Scope</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var a = true;

        </script>    
    </head>
    <body>
        <div>TODO write content</div>
        <script type="text/javascript">
            alert('a is '+ a);

            function alterOutput(){
                a = false;
                alert('a is '+ a);
            }

            alterOutput();

            alert('a is '+ a);

        </script>



    </body>
</html>

不使用全局变量的原因是，即使在函数范围内重新分配变量，因为它最初被定义为全局变量，所以值已更改。

关于Javascript variable scopes on w3schools有一个write-up。

当您加载单独的 Javascript 文件时，浏览器会加载这些文件 non-sequentially 如果不是异步的。在启动依赖代码之前，您需要检查第一个脚本是否已加载。

您甚至可以考虑 requiring the other file.

What is the simplest way to make the variable a available in test2.js?

使 a 可用的最简单方法是在 HTML header 的 script 标记中定义它。为了简单起见，您也可以在 test2.js 中定义它。

Answer 3

What is the simplest way to make the variable a available in test2.js?

这是我实际使用的最简单的方法。

在HTML中：

<div id="something" data-var="blank">

test1.js

 document.getElementById('something').dataset.var = 'true';

test2.js

var a = document.getElementById('something').dataset.var;
alert("a is " + a);
console.log("a is " + a);

您的变量是 "glued" 到页面，因此它可用于您可以加载的每个 js。想来一个<input type="hidden">，不过比较隐蔽。

也许这不是最优雅的解决方案，但肯定很简单，特别是如果您在一个页面中有一百个 div 并且不想处理庞大的 Object 来存储所有值。

我的数百个 data- 是通过 Ajax 调用创建的，从 php 包含文件获取模板并填充空白：我使用它们来恢复由用户恢复到原来的价值。

Answer 4

好的，事情是这样的。

提问者的编辑器出现故障，导致文件 test1.js 为空白。因此，代码 var a = true 永远不会运行.

更多详情：一切就绪后，代码按预期工作。由于所有代码都已经在全局范围内（例如：不在 function() {} 内），var a = true 声明了一个名为 a 的全局变量，其初始值为 true。

只要 test1.js 中的代码在 test2.js 之前是运行，代码就可以正常工作。请记住，这意味着代码运行的顺序是不同的。在这种情况下，它只取决于文件在 test.html 文件中列出的顺序。这是因为即使浏览器可能在 test1.js 完成之前异步完成加载 test2.js，它也知道指定文件的顺序并按该顺序读取代码。

不要忘记孩子们：全局变量通常是不好的，如果您真的觉得有必要使用它们，请重构您的代码，直到您改变主意:)。

如何在一个 Javascript 文件中授予对另一个文件中定义的变量的访问权限

How to give access in one Javascript file to a variable defined in another

javascript

scope