如何在javascript中将变量传输到外部js文件?

时间:2012-07-20 06:53:48

标签: javascript jquery

案例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文件中无法识别..

我该怎么办?有什么建议吗?

2 个答案:

答案 0 :(得分:5)

变量只能在不同的脚本之间共享,如果它们是:

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

  5. 编辑:既然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)传递给它。
    3. 然后,在doIt(a, b, c, d)的实现中,您可以获得传递给它的这四个数据值。
    4. 所以,在你的外部文件中,你有这个:

      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);
      
      });
      

答案 1 :(得分:3)

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

我认为全局变量确实是你的选择。但是,您可以改为创建全局命名空间:

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

等。这样会更清晰,因为在全局范围的顶层只有一个对象。