首頁(yè) 猿問(wèn) 最后加載的JS文件里寫(xiě)$(func...

最后加載的JS文件里寫(xiě)$(function() {});ready函數(shù)的意義何在？

JavaScript

慕的地8271018 2018-10-17 14:13:34

如果在body的最后面在家一個(gè)script標(biāo)簽。js內(nèi)容是$(function() {});那么，當(dāng)最后加載這個(gè)script標(biāo)簽的時(shí)候是不是就沒(méi)必要寫(xiě)$(function() {});了？因?yàn)槲矣X(jué)得，按照頁(yè)面加載順序，加載到body最后的時(shí)候不是本身就是dom加載完成的狀態(tài)了嗎？是不是就不需要在寫(xiě)$(function() {});了？

查看完整描述

1 回答

嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊

jQuery 的 ready 方法在現(xiàn)代瀏覽器中的實(shí)際是監(jiān)聽(tīng) document 的 DOMContentLoaded 事件。此事件是在文檔的 DOM 結(jié)構(gòu)加載完成后觸發(fā)，注意這里是文檔結(jié)構(gòu)而不是整個(gè)頁(yè)面內(nèi)容（引用資源不屬于文檔結(jié)構(gòu)，如圖片）。

在 body 最后面直接執(zhí)行與使用 ready 方式執(zhí)行腳本在時(shí)間點(diǎn)上還是有一些差別的，ready 方式會(huì)等到 </html> 加載完后才會(huì)觸發(fā)。

如果 script 標(biāo)簽后面就是 </body>了，那直接運(yùn)行和調(diào)用 ready 方法（這里的 $(function() {}) 調(diào)用的其實(shí)是 ready() 方法）運(yùn)行基本沒(méi)有差別。當(dāng)然 jQuery 的 ready 方法還有隔離作用域的作用（但不是主要作用，隔離使用域可以使用 IIFE 的）。

如果 script 標(biāo)簽后面還有別的內(nèi)容比較能看清楚問(wèn)題在哪里，如下代碼：

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <title>Document</title></head><body>
  <script>
    $(function() {      console.log('ready');
    });
    
    (function () {      console.log('run');
    })();  </script>
  <script>
    console.log('last');  </script></body></html>

如果你能想清楚輸出順序，那就明白我說(shuō)的意思了。

所以，雖然代碼放在了 body 所有內(nèi)容之后，是不是還需要 ready() 方式書(shū)寫(xiě)代碼要視情況而定，不能一概而論。

反對(duì) 回復(fù) 2018-11-02