HTML5技术

【深入浅出jQuery】源码浅析2--奇技淫巧 - ChokCoco(4)

字号+ 作者:H5之家 来源:博客园 2016-03-29 18:00 我要评论( )

1)首先要明确,使用 $('xxx') 这种实例化方式,其内部调用的是return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了jQuery.fn.init() 方法取完成。 2)将 jQuery.fn.init

1)首先要明确,使用 $('xxx') 这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法取完成。

2)将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3)也就是实例化方法存在这么一个关系链  

 

   setTimeout

写到这里,发现上文的主题有些飘忽,接近于写成了 如何写出更好的 Javascript 代码,下面介绍一些 jQuery 中我觉得很棒的小技巧。

熟悉 jQuery 的人都知道 DOM Ready 事件,传Javascript原生的 window.onload 事件是在页面所有的资源都加载完毕后触发的。如果页面上有大图片等资源响应缓慢, 会导致 window.onload 事件迟迟无法触发,所以出现了DOM Ready 事件。此事件在 DOM 文档结构准备完毕后触发,即在资源加载前触发。另外我们需要在 DOM 准备完毕后,再修改DOM结构,比如添加DOM元素等。而为了完美实现 DOM Ready 事件,兼容各浏览器及低版本IE(针对高级的浏览器,可以使用 DOMContentLoaded 事件,省时省力),在 jQuery.ready() 方法里,运用了 setTimeout() 方法的一个特性, 在 setTimeout 中触发的函数, 一定是在 DOM 准备完毕后触发。

jQuery.extend({ ready: function(wait) { // 如果需要等待,holdReady()的时候,把hold住的次数减1,如果还没到达0,说明还需要继续hold住,return掉 // 如果不需要等待,判断是否已经Ready过了,如果已经ready过了,就不需要处理了。异步队列里边的done的回调都会执行了 if (wait === true ? --jQuery.readyWait : jQuery.isReady) { return; } // 确定 body 存在 if (!document.body) { // 如果 body 还不存在 ,DOMContentLoaded 未完成,此时 // 将 jQuery.ready 放入定时器 setTimeout 中 // 不带时间参数的 setTimeout(a) 相当于 setTimeout(a,0) // 但是这里并不是立即触发 jQuery.ready // 由于 javascript 的单线程的异步模式 // setTimeout(jQuery.ready) 会等到重绘完成才执行代码,也就是 DOMContentLoaded 之后才执行 jQuery.ready // 所以这里有个小技巧:在 setTimeout 中触发的函数, 一定会在 DOM 准备完毕后触发 return setTimeout(jQuery.ready); } // Remember that the DOM is ready // 记录 DOM ready 已经完成 jQuery.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be // wait 为 false 表示ready事情未触发过,否则 return if (wait !== true && --jQuery.readyWait > 0) { return; } // If there are functions bound, to execute // 调用异步队列,然后派发成功事件出去(最后使用done接收,把上下文切换成document,默认第一个参数是jQuery。 readyList.resolveWith(document, [jQuery]); // Trigger any bound ready events // 最后jQuery还可以触发自己的ready事件 // 例如: // $(document).on('ready', fn2); // $(document).ready(fn1); // 这里的fn1会先执行,自己的ready事件绑定的fn2回调后执行 if (jQuery.fn.trigger) { jQuery(document).trigger("ready").off("ready"); } } })

 

暂且写这么多吧,技巧还有很多,诸如 $.Deferred() 异步队列的实现,jQuery 事件流机制等,篇幅较长,将会在以后慢慢详述。

原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,请点下推荐,写文章不容易。

系列第一篇:【深入浅出jQuery】源码浅析--整体架构

最后,我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下,给颗星星。jQuery v1.10.2 源码注解 。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Android -- 带你从源码角度领悟Dagger2入门到放弃(一) - 阿呆哥哥

    Android -- 带你从源码角度领悟Dagger2入门到放弃(一) - 阿呆哥哥

    2017-04-21 11:02

  • ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    2017-04-14 13:04

  • 深入浅出数据库索引原理 - 陈宏鸿

    深入浅出数据库索引原理 - 陈宏鸿

    2017-04-03 10:00

  • 车大棒浅谈jQuery源码(二) - 车大棒

    车大棒浅谈jQuery源码(二) - 车大棒

    2017-04-02 10:07

网友点评