Javascript 调用模块中定义的函数不在onload的作用域中_Javascript

Javascript 调用模块中定义的函数不在onload的作用域中

javascript

Javascript 调用模块中定义的函数不在onload的作用域中,javascript,Javascript,我对模块/范围有问题。我需要将脚本标记声明为type=“module”，但在该范围内声明的函数不是全局函数，因此不能用onload等调用第一个文件：index.html <html> <head> <script type="module"> import {sayHi} from './sayHi.js'; function x() { var myDiv = document.getElementById('myDi

我对模块/范围有问题。我需要将脚本标记声明为type=“module”，但在该范围内声明的函数不是全局函数，因此不能用onload等调用

第一个文件：index.html

<html>
<head>

<script type="module">
  import {sayHi} from './sayHi.js';
  function x() {
    var myDiv = document.getElementById('myDiv');
    myDiv.innerHTML = sayHi('John')
  }
</script>

</head>
<body onload="x()">
  <div id="myDiv"> *** replace with function call *** </div>
</body>
</html>

x函数不在块外的范围内，因此我得到错误：

(index):36 Uncaught ReferenceError: x is not defined
    at onload ((index):36)

如何使x全局化？

似乎模块就是这样工作的：

最后但并非最不重要的一点是，让我们明确这一点-模块功能是导入到单个脚本的作用域中-它们在中不可用全球范围。因此，您将只能访问导入的脚本中的功能已导入，您将无法例如，从JavaScript控制台访问它们。你还是会获取DevTools中显示的语法错误，但您将无法使用您可能希望使用的一些调试技术

但应为您提供一个解决方案：

<html>
<head>

<script type="module">
  import {sayHi} from './sayHi.js';
  function x() {
    var myDiv = document.getElementById('myDiv');
    myDiv.innerHTML = sayHi('John')
  }
  document.addEventListener("DOMContentLoaded", x);
</script>

</head>
<body>
  <div id="myDiv"> *** replace with function call *** </div>
</body>
</html>


从'/sayHi.js'导入{sayHi}；
函数x（）{
var myDiv=document.getElementById（'myDiv'）；
myDiv.innerHTML=sayHi（'John'）
}
文件。添加的文件列表器（“DOMContentLoaded”，x）；
***替换为函数调用***

虽然可以从模块脚本创建全局变量，但在您的情况下可能不需要这样做

由于模块脚本的评估会自动延迟，因此您可以直接访问脚本中的元素：

<script type="module">
  import {sayHi} from './sayHi.js';
  var myDiv = document.getElementById('myDiv');
  myDiv.innerHTML = sayHi('John')
</script>


从'/sayHi.js'导入{sayHi}；
var myDiv=document.getElementById（'myDiv'）；
myDiv.innerHTML=sayHi（'John'）

如果出于任何原因，这不适用于您，请改为从脚本内部绑定事件处理程序：

<script type="module">
  import {sayHi} from './sayHi.js';
  window.addEventListener('DOMContentLoaded', () => {
   var myDiv = document.getElementById('myDiv');
   myDiv.innerHTML = sayHi('John')
  });
</script>


从'/sayHi.js'导入{sayHi}；
window.addEventListener（'DOMContentLoaded'，（）=>{
var myDiv=document.getElementById（'myDiv'）；
myDiv.innerHTML=sayHi（'John'）
});

<script type="module">
  import {sayHi} from './sayHi.js';
  window.addEventListener('DOMContentLoaded', () => {
   var myDiv = document.getElementById('myDiv');
   myDiv.innerHTML = sayHi('John')
  });
</script>