JS的window.onload事件必須要等到所有內容,以及外部圖片之類的文件加載完之后,才會去執行。
JQuery入口函數是在所有標簽加載完之后,就會去執行。
接着,通過JS的一個覆蓋問題引出對JQuery入口函數實現的解釋。
JS的入口函數window.onload函數有一個覆蓋的問題,當文檔中出現2個window.onload函數的時候,后者會覆蓋前者,導致功能實現不了。但是JQuery卻沒有這樣的問題,重要是因為JQuery入口函數只是對封裝好了的方法的一個調用,只不過傳的參數不同而已。
最后,說說JQuery入口函數($(document).ready();)的實現方式。
首先,我們在script標簽中我們先創建一個函數變量就叫$,然后,在后面調用。現在並沒有任何效果,因為這個調用的只是一個空的對象,沒有任何參數。如果我們想在$()后面繼續調用,還需要做一些事情。我們看JQuery入口函數中是不是有個ready方法,那我們可以創建一個對象的屬性就叫ready,然后將ready指向一個匿名的函數,現在我們就可以通過$().ready()來調用了。
用一個具體的函數測試一下:
接着,JQuery入口函數可以傳一個函數(作為變量傳入)進來,即$().ready(function(){}),然后用一個形參(func)變量接收,那么嚴格執行接收的這個方法,只要調用一下(func())就行。
下面再看看JQuery入口函數前面的document參數,即$(document).ready(function(){}),這樣和JQuery的入口函數就一模一樣了。同樣需要用一個變量接收。最后只要在ready函數里面去判斷一下這個onload事件有沒有(或者說有沒有被賦值):
(1)有(被賦值),接收一個舊的函數,重新賦值onload事件,然后先去調用新的函數,接着再調用舊的函數,這樣就不會有覆蓋的問題,他倆個函數都實現了。
(2)沒有,直接賦值個onload事件。
最后,我們來測試一下,由於document沒有onload事件,我們可以用window來試一下。
這樣就避免了函數覆蓋的問題。