Javascript 两个外部文件之间的变量

Question

我是 JS 新手，我不明白为什么这不起作用。以下内容在名为 test1.js

的文件中

var greeting;

function randomGreeting(){
    var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
    var randGreet = Math.floor(Math.random() * greet.length);

    greeting = {
        alert: greet[randGreet]
    };
}

在单独的 test2.js 文件中：

alert(greeting.alert);

在我的 HTML 中，我在正文 onLoad 中调用了 randomGreeting()，并且我在 test2.js 之前加载了 test1.js，但我仍然得到undefined 当 test2 为运行时来自控制台。为什么？

Answer 1

使用立即调用函数：

您可以将 randomGreeting() 包装在一个立即调用函数代码块中，以便在它被声明后立即执行，这样您的代码就可以工作了：

var greeting;

(function randomGreeting(){
    var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
    var randGreet = Math.floor(Math.random() * greet.length);

    greeting = {
        alert: greet[randGreet]
    };
})();

在单独的 test2.js 文件中：

alert(greeting.alert);

Answer 2

您有针对 test2.js 运行的竞争条件和稍后触发的文档加载事件。

您要么将警报延迟到设置变量

(function(){
   if (typeof greeting == "undefined")
      return window.setTimeout(arguments.callee, 10);

   alert(greeting.alert);
}());

如果你不记得 randomGreeting，你可以直接内联它

var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
var randGreet = Math.floor(Math.random() * greet.length);
var greeting = {
    alert: greet[randGreet]
};

或者您可以更改脚本以使用 defer 属性

<script scr="test1.js"></script>
<script scr="test2.js" defer></script>
<script>
window.onload = function(){
    alert(greeting.alert);
};
</script>

Javascript 两个外部文件之间的变量

Javascript variable between two external files

javascript

variables

external

function

使用立即调用函数：