使用 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 ，這些年來沒有出現過任何問題。