javascript - 如何在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,随便)。
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);

});