jQuery 中 $(fn) 到底发生了什么
2019-11-19 本文已影响0人
webmrxu
在jQuery项目开发中,常常使用$(fn) 开始页面中的逻辑,如下:
$(function() {
console.log('page is ready')
})
如果没有引入jQuery类库,则会使用window.onload
或者 document.ready
来开始一个页面的逻辑, 但是不推荐使用window.onload
, 有很多关于 window.onload
和 document.ready
区别的文章,大致意思是:
window.onload
会等到页面所有资源(图片、视频、音频等)加载完成时才会执行,当页面中的资源很多时,window.onload
会很迟才执行,影响页面交互,影响用户体验。
document.ready
会等到页面中DOM 结构加载完成时就会执行,这个时候就可以开始页面交互了。
下面是对jQuery 源码中进行分析。
一、将jQuery对象赋值给window.$
![](https://img.haomeiwen.com/i5472529/5ea362b9caab6ce2.jpg)
二、调用jQuery.fn.init 函数
![](https://img.haomeiwen.com/i5472529/4b4e7547304a4ef2.jpg)
三、调用init当传递参数为函数时特殊处理
调用root.ready 方法
![](https://img.haomeiwen.com/i5472529/4448044821481692.jpg)
四、root 赋值为jQuery(document)
所以root.ready 函数调用相当于jQuery(document).ready
![](https://img.haomeiwen.com/i5472529/9e15b7e7ffeb2b70.jpg)
五、jQuery.fn.ready 函数
在代码中注释也比较清晰The deferred used on DOM ready
,当DOM加载完成就会执行。
![](https://img.haomeiwen.com/i5472529/67b3a3ca4e96b56c.jpg)
总结
以上就是对$(fn)
进行调试的过程,和猜想的一样,最终调用的是ready
方法,而不是onload
。