两个 javascript 文件可以通过 html 主体中的引用进行通信吗？

Question

我正在尝试从functions.js导出并将其导入到login.js，但是当我加载localhost：3000时出现错误“未捕获的语法错误：无法在模块外使用导入语句”和“未捕获的语法错误：意外令牌'导出'”

webpack 是唯一的解决方案吗？ 我处于项目的后期阶段，并试图找到简单的工作。

代码：

<html>
 <body
    <script src="/js/exports/functions.js"></script>
    <script src="/js/login.js"></script>
  </body>
</html>

Answer 1

由于您要求一个简单的解决方法，您可以考虑使用全局变量。

您的所有 JavaScript 文件都有一个通用的全局 scope。 浏览器脚本文件之间的通用全局 object 上下文是window 。 当您分配像x = 1这样的变量时，它会被分配给window.x 。 如果你定义一个 function 像function go() {}它被分配给window.go 如果您尝试读取像foo这样的变量，它实际上是在寻找window.foo 。 您的所有 JavaScript 文件都将有权访问此window foo及其属性，无论是显式使用window.foo还是隐式使用。

另外值得一提的是JavaScript 模块是一个东西。 但是，如果您只是在寻找一个快速的解决方案并且现在没有时间学习新的东西，那么精心使用的全局可以让您摆脱困境。

Answer 2

如果您使用<script>手动导入，则不必使用import ，您可以直接使用提供给您的库。

索引.html

<html>
  <head>
    <!-- Order matters! -->
    <!-- Sum has to be imported first so `print.js` can use it -->
    <script src="./sum.js"></script>
    <script src="./print.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

sum.js

const sum = (a, b) => {
    return a + b
}

打印.js

var result = sum(1, 1) // Notice how you dont have to import any library, it's on the global namespace
console.log("1 + 1 = ", result)

Webpack的工作是将所有 JS 文件捆绑到一个文件中。 因此，如果您想使用import ，那么 webpack 将是您要选择的方式。

但要了解每个工具的用途以及创建它的原因。 Webpack 未创建，因此您可以使用import ，并且您仍然可以在没有 Webpack 的情况下制作项目。 但在某些情况下，它肯定会对您有所帮助，并且不会浪费任何知识。

两个 javascript 文件可以通过 html 主体中的引用进行通信吗？

问题描述

2 个解决方案

解决方案1
1 2020-12-19 15:25:04

解决方案2
1 已采纳 2020-12-19 15:26:14

两个 javascript 文件可以通过 html 主体中的引用进行通信吗？

问题描述

2 个解决方案

解决方案1 1 2020-12-19 15:25:04

解决方案2 1 已采纳 2020-12-19 15:26:14

解决方案1
1 2020-12-19 15:25:04

解决方案2
1 已采纳 2020-12-19 15:26:14