javascript - 我應該什麼時候使用jQuery的document.ready函數?


4 Answers

回答:

jQuery的.on()方法:我對AJAX使用.on()方法相當多(動態創建DOM元素)。 .on()點擊處理程序是否總是在document.ready中?

不,並不總是。 如果你在文檔頭加載你的JS,你將需要。 如果您在通過AJAX加載頁面後創建元素,則需要。 如果腳本位於您正在添加處理程序的html元素的下方,則不需要該腳本。

性能:在document.ready內部或外部保存各種javascript / jQuery對象(更重要的是性能差異?)嗎?

這取決於。 它將花費相同的時間來附加處理程序,它只取決於您希望在頁面加載時立即發生它,還是希望它等待整個文檔加載。 所以這將取決於你在頁面上做了什麼其他的事情。

對象範圍:AJAX加載的頁面無法訪問先前頁面文檔內的對象。是否正確? 他們只能訪問document.ready之外的對象(即真正的“全局”對象)?

它本質上是它自己的函數,所以它只能訪問在全局作用域(外部/高於所有函數)或window.myvarname = '';聲明的變量window.myvarname = '';

Question

當我第一次開始使用Javascript / jQuery時,我被告知要使用document.ready,但我從來沒有真正明白為什麼。

可能有人提供了一些關於在jQuery的document.ready包裝javascript / jquery代碼是否合理的基本指導原則?

我感興趣的一些主題:

  1. jQuery的.on()方法:我對AJAX使用.on()方法相當多(通常在動態創建的DOM元素上)。 .on()點擊處理程序是否總是 document.ready
  2. 性能: document.ready 內部外部保存各種javascript / jQuery對象(更重要的是性能差異?)嗎?
  3. 對象範圍:AJAX加載的頁面無法訪問先前頁面文檔的對象。是否正確? 他們只能訪問document.ready 之外的對象(即真正的“全局”對象)?

更新:為了遵循最佳實踐,我的所有javascript(jQuery庫和我的應用程序的代碼)位於我的HTML頁面的底部 ,並且在裝載了AJAX的頁面上的包含jQuery的腳本上使用了defer屬性,以便我可以訪問這些頁面上的jQuery庫。







您應該綁定document.ready中的所有操作,因為您應該等待文檔完全加載。

但是,您應該為所有操作創建函數,並從document.ready中調用它們。 當你創建函數(你的全局對象)時,隨時調用它們。 因此,一旦您的新數據加載並創建了新元素,請再次調用這些函數。

這些功能是您綁定事件和操作項目的功能。

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}



當DOM(文檔對像模型)已被加載時,他準備好的事件發生。

因為這個事件發生在文檔準備好之後,所以它是一個擁有所有其他jQuery事件和函數的好地方。 就像上面的例子。

ready()方法指定發生就緒事件時發生的情況。

提示:ready()方法不應與。一起使用。




Related