JS module模式下如何向window对象挂载函数并实现可选参数调用

问题根因 #

• 标记为type="module"的脚本默认自带defer加载属性，会等待整个HTML解析完成后才执行，不会阻塞页面解析
• 你写的普通同步script标签会在HTML解析到对应位置时立刻执行，此时main.js还未完成加载和执行，window._init_还没有被挂载，直接调用_init_()就会抛出未定义错误
• 浏览器控制台查询时页面已经加载完成，main.js早已执行完毕完成变量挂载，因此可以正常获取到window._init_

解决方案 #

你原本的函数参数可选写法本身是符合ES6标准的，不需要调整，只要修正调用时机即可，可选方案如下：

方案1：监听页面加载完成事件后调用 #

将调用逻辑放到DOMContentLoaded回调中，保证此时module脚本已经执行完成，函数已挂载到window对象：

<script type="module" src="./main.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
    // 两种调用方式都可以，显式写window._init_更稳妥
    window._init_();
    // 传参用法：window._init_('test-id')
})
</script>

方案2：将调用脚本也改为module类型 #

module类型脚本会按照在HTML中的出现顺序执行，后引入的module脚本可以直接访问前一个module脚本挂载到window的变量：

<script type="module" src="./main.js"></script>
<script type="module">
    _init_();
    // 传参用法：_init_('test-id')
</script>

内容的提问来源于stack exchange，提问作者Sreerup