时间戳

首页 > 解决方案 > 如何链接 JavaScript 文件以使用其他文件中的数组

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

问题描述

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

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

谢谢你的帮助

在此处输入图像描述

标签： javascript

解决方案

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

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

本质上，您应该有一些data.js脚本加载到index.html. 然后您可以公开一些数据，例如：

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';

推荐阅读