欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

理解merge和pushStack可以更好的了解jQuery源码

程序员文章站 2022-05-26 13:59:08
我就想看看自己js学到什么程度然后让自己对jquery方法有更深的印象就“作死着”去看了看jquery,毕竟都说其编码结构很nb… 目前还只...

我就想看看自己js学到什么程度然后让自己对jquery方法有更深的印象就“作死着”去看了看jquery,毕竟都说其编码结构很nb…

目前还只看到前面一部分,基本是在jquery构造方法下 定义了一些变量和方法。

然后发现 merge() 和 pushstack() 出现多次,然后就去看了这两个方法,相信对大家也会很有用的。

merge源码

/****
    这个代码其实很容易理解,就是把第二个对象的属性附加到第一个上去,
    其实就是返回一个合并后的数组
***/
merge: function( first, second ) {
        var len = +second.length,
            j = 0,
            i = first.length;

        for ( ; j < len; j++ ) {
            first[ i++ ] = second[ j ];
        }

        first.length = i;

        return first;
    }

pushstack源码

/****
    来到pushstack函数,其作用是将一个dom元素集合加入到jquery栈。
    这里需要讲一下*this.constructor()*其实就是jquery的构造函数init,所以this.constructor()返回一个jquery对象,将当前元素elems通过merge方法合并,完成入栈。并且在ret上添加了prevobject属性,使得上一个对象得以保存,可以通过对象的prevobject属性去到上一级对象。
***/
    pushstack: function( elems ) {

        var ret = jquery.merge( this.constructor(), elems );

        ret.prevobject = this;

        return ret;
    }

例如eq()方法

/*当找到匹配元素时将其放入堆栈,否则返回空对象**/
eq: function( i ) {
        var len = this.length,
            j = +i + ( i < 0 ? len : 0 );
        return this.pushstack( j >= 0 && j < len ? [ this[ j ] ] : [] );
    }