时间戳

首页 > 解决方案 > 使用多个 Javascript 文件的最佳方法是什么？

javascript - 使用多个 Javascript 文件的最佳方法是什么？

问题描述

所以我打算在某种意义上创建一个“网络街机”，并且我希望在选择不同的游戏时运行不同的 Javascript 文件，这样做的最佳方法是什么？

是否可以通过单击 HTML 页面上的某个按钮来运行 Javascript 文件？我已经尝试过使用模块，但目前我的水平似乎有点复杂，并希望有一个更简单的替代方案。

谢谢！

标签： javascriptmoduleonclick

解决方案

您可以在各种文件中包含script标签。src需要注意的是，您必须注意加载它们的顺序。此外，您可以定期声明变量const/let/var并在之后加载的文件中定期使用它们。

<!DOCTYPE html>
<html>
  <head>
    <script src="settings.js"></script>
    <script src="loop.js"></script>
  </head>
</html>

// settings.js
const worldData = {
  size: [230, 342]
};

// loop.js
console.log(worldData); // logs `{ size: [230, 342] }` because this file is loaded after `settings.js`

function draw() { /* omit */ }
// call `draw` in a loop somewhere with HTML5 Canvas or P5

但是，我强烈建议使用 ES 模块。它们使您的代码更易于理解，例如以下项目：

<!DOCTYPE html>
<html>
  <head>
    <script src="loop.js" type="module"></script> <!-- Note that we only need this entry file -->
  </head>
</html>

// settings.js
export const worldData = {
  size: [230, 342]
};

// loop.js
import { worldData } from "./settings.js" // automatically sends request and gets script exports

console.log(worldData); // logs `{ size: [230, 342] }` because we already imported it

function draw() { /* omit */ }
// call `draw` in a loop somewhere with HTML5 Canvas or P5

ES Modules 版本要好得多，因为如果您有许多文件访问 . worldData，那么您可以只做一个，import { worldData } from "/settings.js"而不必确保您的文件以正确的顺序加载。

推荐阅读