码迷,mamicode.com
首页 > 其他好文 > 详细

(92-176)

时间:2014-12-08 17:04:43      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   for   on   div   

原型定义

jQuery.fn = jQuery.prototype = {
    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // Start with an empty selector
    selector: "",

    // The default length of a jQuery object is 0
    length: 0,

    toArray: function() {
        return slice.call( this );
    },

    // Get the Nth element in the matched element set OR
    // Get the whole matched element set as a clean array
    get: function( num ) {
        return num != null ?

            // Return just the one element from the set
            ( num < 0 ? this[ num + this.length ] : this[ num ] ) :

            // Return all the elements in a clean array
            slice.call( this );
    },

    // Take an array of elements and push it onto the stack
    // (returning the new matched element set)
    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;
    },

    // Execute a callback for every element in the matched set.
    // (You can seed the arguments with an array of args, but this is
    // only used internally.)
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },

    map: function( callback ) {
        return this.pushStack( jQuery.map(this, function( elem, i ) {
            return callback.call( elem, i, elem );
        }));
    },

    slice: function() {
        return this.pushStack( slice.apply( this, arguments ) );
    },

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

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

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

    end: function() {
        return this.prevObject || this.constructor(null);
    },

    // For internal use only.
    // Behaves like an Array‘s method, not like a jQuery method.
    push: push,
    sort: arr.sort,
    splice: arr.splice
};

1. jquery: version 版本信息, constructor: jQuery 原型的构造函数属性修改为函数jQuery,selector: "", 属性存放选择器,length存放jQuery对象的长度,将jQuery对象模仿成数组对象,使得可以像处理数组那样处理jQuery对象。

2.将类数组转化为数组

//模仿出一个类数组对象
var a = { 0: 2, 1: 4, 2: 6,length:3}
console.log(Array.prototype.slice.call(a));//[ 2, 4, 6 ]

jQuery对象是一个类数组对象,我们可以用slice将其转化为数组。

3.get方法

var arr = [],
slice = arr.slice;
//提取出get,这个操作会覆盖原代码中的get    
jQuery.fn.get =  function( num ) {
        return num != null ?

            // Return just the one element from the set
            ( num < 0 ? this[ num + this.length ] : this[ num ] ) :

            // Return all the elements in a clean array
            slice.call( this );
}
var $div = $(‘div‘)
//正数和0
//这个情况下与[]访问符效果一样
console.log($div.get(0) === $div[0])

//负数位置
console.log($div.get(-1))

//为空时转化为将对象数组,
console.log($div.get())

这里先讲一下三目运算符[con]?[code] :[code];三目预算符等价于If(){}else(){}。

if( a != null ){
    if( a<0 ){
        this[ num + this.length ]
    }else{
        this[ num ] 
    }
}else{
    slice.call( this )
}

//等价于
a != null ?( num < 0 ? this[ num + this.length ] : this[ num ] ) :slice.call( this );

相比较,功能一样,代码的量缩小,可读性变差。自己取舍。

在负数情况下,length+index  = 元素的位置。

4.jQuery对象栈。

var $ = {0:1,prev: Object.prototype}
console.log($[0])
$ = {0:2,prev:$}
console.log($[0])
$ = {0:3,prev:$}
console.log($[0])

//回溯
$ = $.prev
console.log($[0])

在这个例子中,我们通过在新对象中存储对上一对象的引用,可以实现栈式的回溯访问。

jQuery对象在遍历功能中运用了这一原理,在遍历操作后返回的是一个新的jQuery对象,这个新的对象存在对上一对象的引用,以实现链式的回溯访问。

下面来看jQuery中的实现

var slice = [].slice;
jQuery.fn.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.fn.slice = function() {
        return this.pushStack( slice.apply( this, arguments ) );
}
jQuery.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;
}
jQuery.fn.end = function() {
        return this.prevObject || this.constructor(null);
}
console.log($(‘li‘).slice(2,4).css(‘background-color‘,‘red‘).end());

这里pushStack扮演的角色就是设置一个对上个对象引用的属性,因为它不是初始化的jQuery对象,我们还要设置一下它的上下文context, merge 的作用是合并对象设置length。

 end 的作用是返回上个对象,当没有这个属性就构造一个空jQuery对象(because  constructor: jQuery, line 96)。

总得来说,遍历是为了对当前已存在jQuery对象筛选,采用栈的原因是方便我们在链式调用中回溯,这要比重新构造jQuery对象来得快的多。

(92-176)

标签:style   blog   io   ar   color   sp   for   on   div   

原文地址:http://www.cnblogs.com/winderby/p/4151252.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!