如何在JavaScript中将变量传输到外部js文件？

Question

情况1：我已经将变量传递给了这样的外部js文件

<script type="text/javascript">

var data1, data2, data3, data4;

function plotGraph() {
    var oHead1 = document.getElementsByTagName('HEAD').item(0);
    var paramScript = document.createElement("script");
    paramScript.type = "text/javascript";
    paramScript.setAttribute('data1', data1);
    paramScript.setAttribute('data2', data2);
    paramScript.setAttribute('data3', data3);
    paramScript.setAttribute('data4', data4);
    oHead1.appendChild(paramScript);
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "js/graph.js";
    oHead.appendChild(oScript);
}
</script>

情况2：我什至尝试使用jquery这样传递它

<script type="text/javascript">   

    function plotGraph() {
        var data1, data2, data3, data4;
        $.getScript("js/graph.js");
    }
</script>

在第一种有效的情况下，但是我不得不创建全局变量……我不想要这个……

在第二种情况下，不起作用的局部变量在js文件中无法识别。

我该怎么办？ 有什么建议么？

Answer 1

变量只有在以下情况下才能在单独的脚本之间共享：

1. 全局变量
2. 如果它们在某种情况下处于同一上下文中（很难使用多个外部脚本）
3. 如果在一个模块中提供函数，该函数返回对变量的访问。
4. 如果调用另一个脚本并将变量或对变量的引用传递给另一个脚本。

---

编辑：既然OP已经解释了他们真正想做的事情（将来自Ajax调用的数据传达给外部脚本中的函数），那么此问题的真正答案是：

您应该从ajax调用的成功处理程序中在外部脚本中调用全局函数，并将这些数据元素传递给该函数。 然后，外部脚本中的函数既可以立即对数据进行操作，也可以将数据保存在自己的变量中以备后用。

---

仅供参考： $.getScript()在全局级别加载脚本。 这就是为什么您的案例2无法正常工作的原因。

共享对一组变量的访问的一种方法是将它们全部作为对象的属性放置，然后使该对象成为全局对象，或者提供一个全局函数来检索对该对象的访问。 例如，您可以声明具有多个属性的单个全局对象。

var myConfigObject = {
    data1: value1,
    data2: value2,
    data3: value3,
    data4: value4
};

---

要在您的外部脚本文件中调用函数，请执行以下操作：

1. 在您的外部脚本文件中定义一个全局可访问的函数。 我们称它为doIt(a, b, c, d) -一个具有四个参数的函数。
2. 然后，在可以使用数据值的ajax调用中，只需调用doIt()并将所需的数据值doIt(3, "foo", data4, whatever)传递给它doIt(3, "foo", data4, whatever) 。
3. 然后，在doIt(a, b, c, d) ，您可以使用传递给它的那四个数据值。

因此，在您的外部文件中，您将拥有以下内容：

function doIt(a, b, c, d) {
    // do whatever doIt wants to do
    // use the arguments passed to this function
}

在您的主要index.html文件中，您将调用ajax：

$.ajax(..., function(data) {
    // process the returned data from the ajax call
    // call doIt
    doIt(3, "foo", data4, whatever);

});

Answer 2

您的代码执行paramScript.setAttribute('data1', data1); 等是不必要的。 这只是意味着代码段中生成的HTML看起来像<script type="text/javascript" data1="data1" data2="data2"...

我认为全局变量确实是您的选择。 但是，您可以改为创建全局名称空间：

var scriptParams = {};
scriptParams.data1 = 'data1';
scriptParams.data2 = 'data2';

等。这样会更干净，因为在全局作用域的顶层只有一个对象。