JavaScript - 如何在 .js 文件之间传递全局变量？

Question

我对 JavaScript 和一般编程还很陌生。我认为我正在以错误的方式解决这个问题，但我会尝试解释我正在尝试做什么以及我是如何做的。它不起作用。

我制作了一个包含五个框的页面，您可以点击这些框。当您单击其中一个时，它会运行一个存储在一个 js 文件中的函数，并查看案例以找到匹配的那个，然后更改文本框中的文本以及下面五个框中的选项。我认为我遇到了全局变量无法从一个包含的 .js 文件转移到另一个文件的问题。

我想不出另一种方法来做到这一点。我不能只返回一个变量，因为我需要为每个选择的每个案例语句更改大约 5 个单独的变量。有没有比这些似乎不起作用的 $choice 变量更好的来回传递这些信息的方法？

文件1.js

var $choice1 = "0";
var $choice2 = "0";
var $choice3 = "0";
var $choice4 = "0";
var $choice5 = "0";

//Main Body - start doing stuff once the page has loaded    
$( document ).ready(function() {    

//Run once
NewArea("newgame");

$("#choice1").click(function() {
    NewArea($choice1);
    });

$("#choice2").click(function() {
    NewArea($choice2);
    });

$("#choice3").click(function() {
    NewArea($choice3);
    });

$("#choice4").click(function() {
    NewArea($choice4);
    });

$("#choice5").click(function() {
    NewArea($choice5);
    });

});

然后我们有文件 2.js

function NewArea($area) {
    switch($area)
    {
    case "newgame": //Start of the game
        $("#textbox").html("blah");
        $("#choice1").html("Look around");
            $choice1 = "look_1";
        $("#choice2").html("Listen around");
            $choice1 = "listen_1";
        $("#choice3").html("Smell around");
            $choice1 = "smell_1";
        $("#choice4").html("Feel around");
            $choice1 = "feel_1";
        $("#choice5").html("Taste around");
            $choice1 = "taste_1";
        break;

    case "look_1":
        $("#textbox").html("blah2");
        $("#choice1").html("");
            $choice1 = "0";
        break;

    default:
        break;
    }
}

Answer 1

您至少应该考虑为全局变量命名空间，以确保清晰度和更简洁的代码。您还可以将其设为数组而不是离散变量，这样您就可以在必要时轻松扩展它们(请记住，您的 ID 索引将减去 1，因为数组是从 0 开始索引的):

var myGame = {
    choices: [0, 0, 0, 0, 0];
};

正如其他人所提到的，关键是这段代码在 file2.js 之前加载(通过在 file1.js 和 file2.js 之前将其加载到单独的文件中，或者确保 file1.js 在 file2.js 之前加载).

您提到您不知道执行此操作的另一种方法，而且您似乎正在使用 DOM 不可知论的 jQuery 方法，因此其他可能有效(但不一定更好)的方法是:

• 将选项存储在隐藏的输入字段中。这将使您的 DOM 而不是全局命名空间变得困惑。 ;) 所以你可以拥有 <input type='hidden' value='0' name='choice1Value'/>然后获取/设置其中的值。
• 您还可以使用 jQuery data函数存储每个选择的值:$('#choice1').data('choice', 0);例如。

您还可以考虑其他重构，但这取决于您的文件结构以及您加载它们的方式，但希望这能提供一些关于不同方法的想法。