如何从 JS 中的 window 对象访问和分配函数？

Question

我曾尝试将函数分配给 window 对象，例如 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 文件并将其作为一个文件使用

Question/doubt：如何分配和访问 window 对象中存在的函数，将 id 保持为可选，这意味着如果 id 未在函数调用中传递，它将为空string 或者如果传递了 id 它将接受传递的字符串。

Answer 1

模块运行异步。 _init_ 未在您的内联脚本运行时定义。

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

Now I tried calling the function from 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>

如何从 JS 中的 window 对象访问和分配函数？

How to access and assign function from a window object in JS?

javascript

window

function

object