从不同的 .JS 文件引用 function 中的数组

Question

所以我发现自己处于尴尬的境地，我在 main.js 中有一个 function，它需要一个在 second.js 中填充的数组......

简单地说，main.js 中的 function 旨在可重用：

function chug()
{
    p1.innerHTML = st_a[0];
    p2.innerHTML = st_a[1];
    ...
}

现在，'st_a' 应该被解析为：st_ +，在这种情况下，变量是 'a'。 作为 second.js 文件的想法将有多个 arrays（st_a、st_b 等），并且根据需要，相关数组将用于填充段落元素（p1、p2 等）

有任何想法吗？

Answer 1

如果 st_[x] 是一个全局变量，你可以使用window['st_a']来引用它。 所以，你应该能够使用类似的东西：

function chug()
{
    var arrid = 'st_'+'a';
    p1.innerHTML = window[arrid][0];
    p2.innerHTML = window[arrid][1];
    //...
}

或使用 function 检索数组：

function getArr(id){
  return window['st_'+id];
}

或者，您可以在second.js中使用带有“get”方法的容器 object，例如：

var myArrays = {
  st_a: [],
  st_b: [],
  st_c: [],
  get: function(id){
    return this['st_'+id];
  }
  /* etc */
}

现在chug看起来像：

function chug()
{
    var arr = myArray.get('a');
    p1.innerHTML = arr[0];
    p2.innerHTML = arr[1];
    //...
}

Answer 2

使用全局变量是邪恶的。 因为你可以覆盖另一个已经设置的，javascript 不会告诉你你做了一些愚蠢的事情。

您有多种选择来避免使用它们：

• 使用单个 object 来包含您的所有功能。 这个例子应该告诉你如何做到这一点：

  var MYAPP = {} MYAPP.chug = function() { // 你的代码 } // 然后，在这个文件之后加载的任何其他文件中，你可以这样做： MYAPP.anotherFunction = function() {} // 甚至这个: MYAPP.chug()

这样，您仅用一个变量污染了全局 scope。

• 另一种方法是使用诸如Require.js 之类的库。

然后，要解决您的问题，您可以根据您选择的解决方案执行以下操作：

// Let me borrow this code from kooiinc
MYAPP.myArrays = {
   st_a: [],
   st_b: [],
   st_c: [],
   get: function(id){
       return this['st_'+id];
   }
   /* etc */
}
MYAPP.chug = function() {
    var arr = this.myArrays.get('a') // 'this' refers to the MYAPP object in this case
    p1.innerHTML = arr[0]
    // ...
}