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

Question

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

javascriptjqueryhtml

3

我是一个新手，对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;
    }
}

- Aro

1

JS文件只需在包含它们的页面上包含即可。变量不会在页面之间来回传递。这都是一个文档。 - crush

6

在引入2.js之前，先引入1.js。 - A1rPun

1

请注意，虽然全局变量对于快速和简单的任务非常有用，但是在严肃或生产级别的项目中应该避免使用全局变量。 - Hylianpuffball

1

使用对象字面量而不仅仅是全局变量。不建议使用全局变量。 - Alex Shilman

尝试使用：var NewArea = function ($area)...函数声明会在您声明变量之前被提升，就像在您的情况下一样... - Alex Shilman

2个回答

1

use it like this

<script type='text/javascript' > 
  window.$choice1 = "0";
  window.$choice2 = "0"; 
  window.$choice3 = "0";
  window.$choice4 = "0";
  window.$choice5 = "0";
</script>

然后下面是链接 file1.js 和 file2.js

- Sajad Karuthedath

你这里其实不需要窗口。 - A. Wolff

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Igor · Accepted Answer

为了使代码更加清晰易懂，您应该至少考虑对全局变量进行命名空间处理。您还可以将其制作成数组而不是离散变量，以便在必要时轻松扩展它们（请注意，由于数组是从0开始索引的，因此从ids进行索引时会有1的偏差）：

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

正如其他人提到的那样，关键在于这段代码在file2.js加载之前被加载（可以通过在file1.js和file2.js之前加载一个单独的文件来加载它，或确保file1.js在file2.js之前加载）。

您提到您不知道其他方法来做到这一点，而且似乎您正在使用一个DOM-agnostic jQuery方法，因此可能适用的其他方法（虽然不一定更好）是：

1. 将选择存储在隐藏的输入字段中。这将使您的DOM变得混乱，而不是全局命名空间。;) 因此，您可以有，然后在其中获取/设置值。 2. 您还可以使用jQuery data函数在每个选项上存储值：例如$('#choice1').data('choice', 0);。

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