使用 defer 在同一个 HTML 中实现 jQuery-ready-like function

Question

我想删除我的 jQuery 并且我需要替换$(function() {... }); 与类似的东西。 我见过有人使用新的 HTML 属性defer但他们用它来调用另一个脚本，而不是调用同一个 HTML 源中的代码。 如何在不调用另一个脚本的情况下使用defer在我的 HTML 代码中实现相同的ready功能？

 <div style="margin-top: 100px">.</div> <div>AAAA</div> <script defer>alert('hi')</script> <div>BBBB</div>

Answer 1

您基本上可以使用三个标准选项，两个是显式的，一个是隐式的，取决于浏览器如何解析文档（自上而下，逐个元素）：

1. defer 。 将defer属性添加到脚本标记会导致脚本执行延迟到DOMContentLoaded将触发之前（当解析 DOM 时），并确保DOMContentLoaded在完整脚本执行之前不会实际触发。 请注意，当缺少src属性时，不得使用defer （即它仅适用于外部脚本）。
2. DOMContentLoaded侦听器（或者readyStateChange侦听器，如果您喜欢使事情复杂化的话）。
3. 在结束</body>标记之前添加您的script标记。

请注意，具有type="module"的脚本会自动延迟。

就个人而言，我在 2015 年左右停止使用 jQuery，从那以后，我一直在使用DOMContentLoaded ，这些年来没有出现过任何问题。