这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery 中的 pushStack 实现原理和应用实例, pushStack 是 jQuery 内核中一个非常重要的函数, 许多 jQuery 内部函数中都频繁用到它, 掌握这个函数, 有利于理解 jQuery 的运行原理, 需要的朋友可以参考下
pushStack 是 jQuery 内核中一个非常重要的函数,它是如此重要,以至于许多 jQuery 内部函数中都频繁用到它。平常情况下,虽然很少用到它, 但是掌握这个函数,不仅有利于理解 jQuery 的运行原理,还方便我们做更加高级的 jQuery 操作。
顾名思义,pushStack 是入栈, 栈作为一种数据结构,是一种只能在一端进行插入和删除操作的特殊线性表。数据入栈时,类似与我们进电梯,后进而先出, 如下图:
jQuery 中的栈其实并不是真正的栈,而是给 jQuery 对象附加一个属性,指向当前对象的上一个对象, 通过 end 方法就能返回上一个元素。如下:
- <span>
- 1
- </span>
- <span>
- 2
- </span>
- <span>
- 3
- </span>
- <script>
- $('span').eq(0).CSS('fontSize', '20px').end().fadeOut(2000);
- </script>
上面的代码会使第一个 span 的字体大小为 20px,并让所有 span 在 2 秒钟之内 fadaout。
pushStack 属于 jQuery 的实例方法,通过 jQuery 对象调用,如通过 $().pushStack(document.getElementsByTagName('div')).css('background','blue') 把所有 div 的背景都设置为蓝色。那么 pushStack 的原理是什么,为什么传入的 DOM 对象可以用 css 方法操作呢?先来看一下 jQuery 中 pushStack 的源码:
- pushStack: function( elems ) {
- // Build a new jQuery matched element set
- var ret = jQuery.merge( this.constructor(), elems );
- // Add the old object onto the stack (as a reference)
- ret.prevObject = this;
- ret.context = this.context;
- // Return the newly-formed element set
- return ret;
- }
- //jQuery.merge
- merge: function( first, second ) {
- var l = second.length,
- i = first.length,
- j = 0;
- if ( typeof l === "number" ) {
- for ( ; j < l; j++ ) {
- first[ i++ ] = second[ j ];
- }
- } else {
- while ( second[j] !== undefined ) {
- first[ i++ ] = second[ j++ ];
- }
- }
- first.length = i;
- return first;
- }
pushStack 的实现比较简单,主要涉及到 jQuery 的静态方法 merge, 这个方法用来合并对象, 设计思路是在第一个对象的基础上,把第二个对象的属性 (0 至 n) 附加上去, 理解这一点很重要。再回到 pushStack 这个函数,首先定义一个局部变量 ret 存储合并对象,然后给这个对象存储 prevObject 和 context 属性,最后返回合并之后的 ret 对象。这里有几点需要注意: 1, this.constructor 就是 jQuery 的构造函数 init,所以 this.constructor()返回一个 jQuery 对象. 2, 由于 jQuery merge 函数返回的对象是第二个函数附加到第一个上面,所以 ret 也是一个 jQuery 对象,这里可以解释为什么 pushStack 出入的 DOM 对象也可以用 CSS 方法进行操作。 3, 返回的对象的 prevObject 属性指向上一个对象,所以可以通过这个属性找到栈的上一个对象.
来源: http://www.phperz.com/article/17/0412/272956.html