0

我的 javascript 前端代码中有一些奇怪的行为，所以我要问一个回归基础的问题。首先，我将设置一些示例。

script1.js

var script1Var = "script variable";
function script1Test(){
  console.log("hello from script1 test");
}

script2.js

function script2Test(){
  console.log("hello from script2 test");
}

模块1.js

export default function module1Test(){
  console.log("hello from module1 test");
}

模块2.js

export default function module2Test(){
  console.log("hello from module2 test");
}

test_page1.html

<html>
 <head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

test_page2.html

<html>
 <head>
  <script type="module" src="module1.js"></script>
  <script type="module" src="module2.js"></script>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

以下是我的问题：

  1. 在运行时，由于test_page1.html布局方式，我认为script2.js可以在script1.js不需要任何导入 的情况下script1.js调用函数，但可以在script2.js? 基本上顺序重要吗？我很肯定它确实如此。
  2. test_page2.html函数从和module1.js可module2.js见到script1.js和script2.js？如果不是，如何使它们对他们可见？
  3. 在不使用导入的情况下，test_page2.html函数是否从module1.js可见到？module2.js

基本上我的问题归结为，如何在模块中使用经典脚本（其中没有导出）？以及如何在经典脚本中使用模块。将经典脚本转换为模块在这里不是一个选项，因为有很多代码依赖于将其用作经典脚本。模块也是如此，它们不能转换为经典脚本，因为有其他代码将它们用作模块。

谢谢您的帮助

4

1 回答 1

1
  1. [...] 但是 script1.js 可以调用 script2.js 中的函数吗？基本上顺序重要吗？我很肯定它确实如此。

这取决于。在对其进行评估时script1.js无法调用函数。script2.js即类似的东西

// script1.js
script2Test();

行不通。

但只要在 script2.js加载后它就可以调用这些函数。例如响应一个事件：

// script1.js
document.body.onclick = function() {
  script2Test();
}
  1. 在 test_page2.html 中，module1.js 和 module2.js 中的函数对 script1.js 和 script2.js 可见吗？

不，每个模块都会创建一个单独的范围。只能通过导入来访问导出。

如果不是，如何使它们对他们可见？

模块必须显式创建全局变量，例如通过将属性分配给window：

window.module1Test = module1Test;

而且在这里，只有在模块加载/评估后才能调用这样的函数。

更好的解决方案（至少我相信这适用于“普通”脚本）是通过import函数动态导入模块：

import('./module1Test.js').then(exports => console.log(exports));
  1. 在 test_page2.html 中，module1.js 中的函数是否对 module2.js 可见，而无需使用导入？

不，正如我所说，每个模块都会创建自己的范围。

于 2020-10-01T12:15:17.207 回答