jQuery源码二周目#4 仿栈与队列的操作

仿栈与队列的操作

这一篇内容应该算是所有篇幅中最简单的，也就懒得多费笔墨去讲解，直接上代码。

jQuery是类数组结构，自然也就提供了一条常见的栈与队列操作push、pop、shift、unshift、求和、遍历循环each、排序及筛选等。

    jQuery.fn = jQuery.prototype = {
        // 元素长度
        length: 0,

        get: function(num) {
            return num != null ?
                // 不仅可以传正数还可以传负数
                (num < 0 ? this[num + this.length] : this[num]) :
                // 返回所有元素
                slice.call(this);
        },

        eq: function( i ) {
            var len = this.length,
                j = +i + ( i < 0 ? len : 0 );
            return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
        },
        
        slice: function() {
            return this.pushStack( slice.apply( this, arguments ) );
        },

        first: function() {
            return this.eq( 0 );
        },

        last: function() {
            return this.eq( -1 );
        }
    }

代码很简单，不过还需要改造下pushStack方法

        // 回溯处理设计
        pushStack: function (elems) {
            // 创建一个新的jQuery对象
            var ret = jQuery.merge(this.constructor(), elems);
            ret.prevObject = this;
            return ret;
        },

还需要添加merge方法

    jQuery.extend({

        // 合并两个数组
        merge: function( first, second ) {
            var len = second.length,
                i = first.length;

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

            // 毕竟jQuery只是类数组结构，不能直接获取长度，只能手动设置length属性
            first.length = i;

            return first;
        }
    })

这里面有两个需要注意的地方
1.jQuery原型对象中的length: 0
2.merge方法中的first.length = i

这两行代码看起来没什么用，但是如果真的去掉的话所有的数组操作都会失效，因为jQuery毕竟只是类数组结构，缺少了length这个属性就没办法遍历元素，没法通过下标取值，所以要手动设置上去。