标签: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对象来得快的多。
标签:style blog io ar color sp for on div
原文地址:http://www.cnblogs.com/winderby/p/4151252.html