javascript - 如何链接 JavaScript 文件以使用其他文件中的数组

Question

我正在处理 orders.js，但我需要来自 products/products.js 和 users/users.js 的数组，如何我可以访问这些文件来处理实际文件吗？我是 JavaScript 初学者，我不太清楚如何链接这些文件。

我没有使用任何框架或库，仅使用 Vanilla Java Scrip

感谢您的帮助

Answer 1

这个问题比乍看起来要复杂一些。 JavaScript 是一种在各种环境中使用的语言，它有许多模块系统。

从您发布的图片来看，您似乎正在尝试为每个页面实现一个带有 JS 文件的标准网页。在这种情况下，您无法直接从其他文件“导入”变量，而是必须将它们全部加载到所有文件在浏览器中共享的全局上下文中。

本质上，您应该在 index.html 中加载一些 data.js 脚本。然后您可以公开一些数据，例如:

var myProducts = ['a', 'b'];

在 data.js 之后加载的任何脚本都将能够访问 myProducts。

为了进一步详细说明 JS 模块:通常使用诸如 webpack 之类的打包器它将预编译您的页面和 JS 文件，并允许您执行您所描述的操作，即。从代码中的其他文件导入模块。然而，Webpack 的设置可能非常复杂，尤其是对于初学者来说，我建议尝试 parcel这应该可以让您快速启动并运行。

一旦您设置了打包程序，您就可以从其他文件导入模块，如下所示:

# data.js
module.exports = {
  myProducts: ['a', 'b'],
};

# page.js
const { myProducts } = require('path/to/data.js');

ES 模块注意事项:ParcelJS 实际上预配置了最新的标准(ES 模块)，因此在此设置中您可以使用以下语法:

# data.js
export const myProducts = ['a', 'b', 'c'];

# page.js
import { myProducts } from 'path/to/data.js';