在文档就绪事件中从导入的模块调用函数是否安全

Question

我想在渲染DOM时从导入的模块中调用一个函数。让我怀疑其安全性的是模块文件是异步获取的。因此，我担心的是：是否有可能在文档准备好后提取所需的模块文件？

import someModule from '../someModule.js'
$( document ).ready(function() {
someModule.hello();
});

这个代码安全吗？

Answer 1

该代码是安全的。

如果您使用的是DOMContentLoaded而不是$(document).ready，那么很可能需要担心。模块是异步加载的，模块本身导入的所有内容都在模块主体运行之前加载。即：

import someModule from '../someModule.js'

将首先解析为someModule导出的值，然后模块的其余部分才会运行：

$( document ).ready(function() {
someModule.hello();
});

文档的其余部分可能在那段时间内完成了加载，特别是如果依赖树中有更多的导入链，并且源HTML很短。

但是$(document).ready不仅在文档准备就绪时运行回调，而且在文档已经准备就绪时也会运行回调-这可以用document.readyState进行检查。

示例：

setTimeout(() => {
// the document will have been fully loaded for ages now,
// but the callback will still run:
$(() => {
console.log('running');
});
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您使用DOMContentLoaded，为了安全起见，您需要使用

if (document.readyState === 'complete') {
someModule.hello();
} else {
window.addEventListener('DOMContentLoaded', () => someModule.hello());
}

还要注意，在jQuery中，当文档准备好时，安排回调的首选现代方式是将回调传递给$:

$(() => {
someModule.hello();
});