使用 JavaScript 中其他文件的函数

Question

我正在使用 P5 在 JS 中制作游戏，我遇到了一个问题。

在我的 html 文件中，我引用了 .js 文件：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
  <script src="main.js"></script>
  <script src="isKeyPressed.js"></script>
  <script src="blocks.js"></script>
  <script src="player.js"></script>
</head>
<body>
</body>
</html>

我有一个 .js 文件定义函数 isKeyPressed():

function isKeyPressed(keyQuery) {
  var did = false;
  for(var i = 0; i < keysPressed; i++) {
    if(keysPressed[i] === keyQuery) {
      did = true;
    }
  }
  return did;
}

我在 player.js 中的另一个对象中引用了它：

player.motion = function() {
  if(isKeyPressed('w')) {
    this.velocity.add(0,-5);
  }
  if(isKeyPressed('s')) {
    this.velocity.add(0,5);
  }
  if(isKeyPressed('a')) {
    this.velocity.add(-5,0);
  }
  if(isKeyPressed('d')) {
    this.velocity.add(5,0);
  }
}

但是当我尝试调用 player.motion 时，出现错误：

Uncaught TypeError: isKeyPressed is not a function

有人知道为什么会这样吗？

Answer 1

你可以试试这样的

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
  <script src="main.js"></script>
  <script src="isKeyPressed.js"></script>
  <script src="blocks.js"></script>
  <script src="player.js"></script>
  <script>
    player.motion = function() {
      if(isKeyPressed('w')) {
        this.velocity.add(0,-5);
      }
      if(isKeyPressed('s')) {
        this.velocity.add(0,5);
      }
      if(isKeyPressed('a')) {
        this.velocity.add(-5,0);
      }
      if(isKeyPressed('d')) {
        this.velocity.add(5,0);
      }
    }
  </script>
</head>
<body>
</body>
</html>

这是从 isKeyPressed.js 文件导入所有函数，因此您可以在 <script> 标记中引用它。您无法在 player.js 中使用 isKeyPressed.js 的函数，因为您无法引用它。

Answer 2

郑重声明，我认为接受的答案不正确。具体来说，我认为接受的答案不会真正改变您最初所做的任何事情。我的猜测是您的代码中有另一个问题（例如语法错误）导致了此错误，并且您在实施建议的解决方案的过程中修复了该问题。因此，虽然看起来解决方案解决了您的问题，但实际上是另外一回事。

我提供了这个替代答案，因此您认为您不必直接在 html 中定义 JavaScript，因为事实并非如此。

我尝试通过创建一个包含三个文件的较小示例来测试您的设置：

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="one.js"></script>
  <script src="two.js"></script>
</head>
<body onload="printObj()">
</body>
</html>

one.js

function printOne(){
    console.log("one");
}

two.js

var obj = {};

obj.printTwo = function(){
    console.log("two");
    printOne();
}

function printObj(){
    obj.printTwo();
}

这几乎就是你的设置，它工作正常。你绝对不需要把你的JavaScript 在你的 html 中。只要JavaScript文件以正确的顺序正确加载，您就可以在另一个文件中使用一个文件中的函数和变量文件。

有两个主要问题可能会导致您的问题：

你的文件加载正确了吗？

有没有您没有注意到的语法错误？ （这是我对导致您最初问题的原因的猜测。） 检查 JavaScript 控制台，然后尝试运行一些测试代码来实际运行您尝试调用的函数。
所有文件名都正确吗？
您是否在防火墙后面，或者是否存在其他可能导致加载问题的网络问题？

您的文件加载顺序是否正确？

要使文件 two.js 访问 one.js 中定义的代码，您必须确保 one.js 在 two.js 之前加载。看起来您做对了，但是您确定 JavaScript 是您认为的位置吗？
换句话说，你确定它在 player.js 而不是 main.js 吗？
您可能希望通过将相关 JavaScript 放在同一个文件中来消除这种歧义。让一个文件定义一个 keysPressed 数组然后另一个文件使用该数组定义一个 isKeyPressed() 函数没有多大意义。只需将它们放在同一个文件中，并确保该文件在使用它的其他文件之前加载。

接受的答案在加载内容时没有任何改变。除非你有语法错误，或者 player.motion() 函数实际上在main.js 文件，或者您遇到了网络加载问题，您的代码应该可以正常工作。因此，其中一件事必须是您的实际问题。 您不必在 html 中定义 JavaScript 即可工作。

Answer 3

我建议不要让文件名有大写字母。所以把它从

<script src="isKeyPressed.js"></script>

至

<script src="iskeypressed.js"></script>

也更改文件名。

使用 JavaScript 中其他文件的函数

Using functions from other files in JavaScript

javascript

p5.js