$(document).ready：從多個方面的闡述

一、介紹$(document).ready

$(document).ready()函數，或者稱之為$(function () {} )，是 jQuery 常用的方法之一。它是對文檔（HTML頁面）加載完成時執行的函數的一種綁定方式。具體來說，$(document).ready()函數會在頁面內 DOM結構 構造完成後立即執行，即在頁面的元素全部加載完畢之後，但並不等同於圖片、媒體文件等外部資源的加載，這些不屬於 DOM 結構。

$(document).ready(function () {
    //code do something here
});

二、$(document).ready與window.onload的區別

$(document).ready和window.onload兩個函數都是在頁面加載完成後執行。但是它們之間的區別還是很明顯的：

1. 加載速度的差異

$(document).ready與文檔DOM加載完成時就可以調用，而不用等到外部資源文件（如圖片和樣式表）也加載完成。而window.onload必須等到所有內容，包括外部文件圖片等全部加載完成之後才能執行。這也就是為什麼html頁面元素結構可能會在一個圖片加載完成之後才被$(document).ready函數捕獲。

2. 捕獲事件的不同

$(document).ready和window.onload事件捕獲不同的內容。$(document).ready所捕獲的是文檔的DOM元素結構，而window.onload所捕獲的是整個html頁面所有的元素和文件，包括外部資源文件外部的資源。

3. $(document).ready和window.onload綁定方法不同

$(document).ready可以多次綁定，而window.onload只能綁定一次。$(document).ready函數可以綁定多次，每次DOM結構處理完畢之後都會被執行；而window.onload只能綁定一次，第二次綁定就會覆蓋掉第一次，引起衝突。

$(document).ready(function () {
    console.log("我會被執行多次");
});
$(document).ready(function () {
    console.log("我也會被執行多次");
});

window.onload = function () {
    console.log("我只會執行一次");
};

三、$(document).ready的優點

$(document).ready的應用很廣泛，具有如下優點：

1. 加快頁面渲染速度

因為$(document).ready只等到DOM結構加載完畢就開始執行，所以它比window.onload更快。

2. 增加交互體驗

$(document).ready的另一個優點就是可以增加交互體驗。在沒有使用$(document).ready的情況下，當JS操作了一個還沒加載完的元素的時候，就會拋出異常，從而導致JS調試工作難度加大。但是使用了$(document).ready函數之後，頁面中的元素就都被加載完畢，這就避免了上述情況所帶來的麻煩

3. 簡化操作代碼

使用$(document).ready，可以大大簡化操作代碼。在沒有使用$(document).ready的情況下，無論在何處書寫代碼，都會在文檔中尋找元素實例句柄以進行操作。但是使用$(document).ready之後，代碼都放在該函數中。不僅使代碼更加整潔，而且執行效率更高。

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

四、$(document).ready最佳實踐

下面列舉幾個$(document).ready的最佳實踐：

1. 保證語句正確

在使用$(document).ready函數時，一定要確保語句的正確性。如果有遺漏，則可能造成頁面無法動態加載，甚至導致死鎖。可以採用相應的語法檢查工具來確保代碼的正確性。

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide()
    }
});

2. 減少DOM操作數量

在使用$(document).ready函數的過程中，盡量避免DOM操作的頻繁發生，可以減少代碼的消耗，提高頁面性能響應速度。

$(document).ready(function () {
    var myvalue;
    for (var i = 0; i < 1000; i++) {
        myvalue += i;
    }
    $("#output-value").html(myvalue);
});

3. 優化選擇器

合理優化選擇器可以極大地提升頁面渲染速度和響應速度，減少DOM操作。

$(document).ready(function () {
    $("input[name='name']").val("Tom");
});

4. 增強可讀性

在使用$(document).ready函數時，可以通過如下方式增強代碼的可讀性：

• 對於複雜的回調函數，可以考慮單獨聲明一個函數，然後作為參數傳遞到$(document).ready中；
• 對於大型代碼，可以將代碼分割成模塊，提高可讀性；
• 使用注釋來解釋代碼的用途，提高可讀性。

$(document).ready(function () {
    function submitForm() {
        // some validation
        if (isValid()) {
            $("form").submit();
        }
    }

    function isValid() {
        // some validation code
    }

    $("#submit-button").click(function () {
        submitForm();
    });
});

總結

$(document).ready函數是操作DOM結構，提高頁面渲染速度，增加交互體驗，簡化操作代碼的有力工具。而且，只要合理實踐，遵守最佳使用方法，就能夠完美完成各種需求。