javascript - 从不同 JS 文件中的另一个函数调用 JavaScript 函数

Question

我有一个显示 HTML5 Canvas 的网页。当网页加载时，将调用以下 JavaScript 函数:

window.onload = function(){
    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();
};

此函数将一些图像从 HTML 的隐藏部分加载到 JavaScript 中，并通过对“sources”数组中的每个图像调用“drawImage()”函数将它们绘制到 Canvas 上。然后调用“drawGameelements();”函数，它会在 Canvas 上绘制更多内容，最后，我想调用“drawDescriptionBoxes()”函数。

然而，此函数与其余代码位于单独的 JS 文件中，当我在浏览器中查看页面时，尽管调用了“loadImages()”和“drawGameElements()”，并绘制了它们的内容。应该在 Canvas 上，我在控制台中收到一条错误消息:

ReferenceError: drawDescriptionBoxes is not defined

我认为这意味着我没有正确引用该函数，因为它与我调用它的地方不在同一个文件中。

我想知道如何从其他文件调用此函数？它会像这样:filename.js.drawDescriptionBoxes 吗？

Answer 1

drawDescriptionBoxes 函数未定义实际上有两种可能。

1) 超出范围

在 JavaScript 中，变量存在于某种范围内。这可能是全局性的，例如:

<script>
var foo = 123; //foo can be referenced anywhere, it's global!
</script>

或者在另一个代码块范围内:

function myFunc()
{
   var bar = function () //bar can only be accessed within myFunc
   {

   };
};

//bar() here is undefined

您的 drawDescriptionBoxes 函数可能不在全局范围内。

2) 当你的代码运行时还没有定义

也有可能你有这样的代码:

文件 1

<script>
   var result = someFunc(123);
</script>

文件 2

<script>
   function someFunc(x)
   {
      return x * 2;
   }
</script>

如果文件 2 在文件 1之后被包含，当文件 1 运行时 someFunc 还不存在。您可以通过使用事件处理程序在文档完全加载后运行所有内容来解决这个问题。如果 var result = someFunc(123); 在 onload 事件中运行，无论 someFunc 是在什么文件中定义的，它都可以正常工作。

希望这对您有所帮助!