如何在JS中从窗口对象访问和分配函数

Question

我试图将一个函数分配给main.js中的窗口对象

var _init_ = function(id = "") {
//do something
}
window._init_ = _init_;

现在，我尝试从index.html中调用函数，方法是附加如下脚本：

<script type="module" src="./main.js"></script>
<script type = "text/javascript">
_init_();
</script>

但当我刷新浏览器时，它会给我Uncaught ReferenceError: _init_ is not defined尽管当我试图通过浏览器控制台中的window._init_访问它时，它正在返回函数。

注意：我已经将脚本作为module导入，因为我已经将js代码分解到不同的js文件中，并将其用作一个

问题/疑问：如何分配和访问窗口对象中存在的函数，保持id为可选，这意味着如果在函数调用中没有传递id，它将是一个空字符串，或者如果传递了id，它会接受传递的字符串

Answer 1

模块异步运行。_init_不是由内联脚本运行的时间定义的。

虽然有一些方法可以让内联脚本在模块加载后从模块中获取信息，但它不会那么优雅。到目前为止，最好的方法是：

现在我尝试从index.html 调用函数

作为入口点本身：

<script type="module">
import { init } from './main.js';
init(); // pass an ID here if you want
</script>

// main.js
export const init = function(id = '') {
// do something
}

Answer 2

通过动态加载实现这一点的一种方法。

function loadScript() {
const script = document.createElement('script');
script.src = "./main.js";
document.body.appendChild(script);
return new Promise((res, rej) => {
script.onload = function() {
res();
}
});
}

loadScript()
.then(() => {
console.log('loaded, now you can use what ever you need from main.js');
});

另一个是使用onLoad事件：

<script onload="callInit();" type="module" src="./main.js"></script>