JQuery源码分析（七）
了解jQuery对DOM进行遍历背后的工作机制，这样可以在编写代码时有意识地避免一些不必要的重复操作，从而提升代码的性能。
关于jQuery对象的包装
var $aaron = $("aaron");
我们可以得知Query选择器最终都是通过DOM接口实现取值的, 但是通过jQuery处理后返回的不仅仅只有DOM对象，而是一个包装容器，返回jQuery对象：$aaron
看一下代码：
在jQuery对象中有个prevObject对象，这个是干嘛用的呢？
jQuery对象栈，jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素（一个jQuery对象），然后jQuery会把这组元素推入到栈中。
而每个jQuery对象都有三个属性：context、selector和prevObject，
其中的prevObject属性就指向这个对象栈中的前一个对象，而通过这个属性可以回溯到最初的DOM元素集中。
做一个简单的测试：
<ul id="aaron">
parent
<li>child</li>
</ul>
我们现给li绑定一个事件，这个很简单，找到ul下面的li，绑定即可：
var aaron = $("#aaron");
aaron.find('li').click(function(){
alert(1); //1
})
此时我又想给父元素绑定一个事件，我们是不是又要在aaron上绑定一次事件呢？是的，上面代码通过find处理后，
此时的上下文是指向每一个li了,所以必须要重新引用aaron元素（li的父元素），然后再绑定click事件：
aaron.click(function(){
alert(2); //1
})
这样会不会很麻烦，所以jQuery引入一个简单的内部寻址的机制，可以回溯到之前的Dom元素集合，通过end()方法可以实现：
aaron.find('li').click(function() {
alert(1);
}).end().click(function() {
alert(2);
})
jQuery为我们操作这个内部对象栈提供了两个非常有用的2个方法
.end()
.addBack()
andSelf现在是.addBack()的一个别名。在jQuery1.8和更高版本中应使用.addBack()
源码其实也是这样的
jQuery.fn.andSelf = jQuery.fn.addBack;
调用第一个方法只是简单地弹出一个对象（结果就是回到前一个jQuery对象）。
第二个方法更有意思，调用它会在栈中回溯一个位置，然后把两个位置上的元素集组合起来，并把这个新的、组合之后的元素集推入栈的上方。
利用这个DOM元素栈可以减少重复的查询和遍历的操作，而减少重复操作也正是优化jQuery代码性能的关键所在。
<button id="test1">直接处理</button>
<button id="test2">通过end连贯处理</button>
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<script type="text/javascript">
$("#test1").click(function(){
//直接处理
var foo = $('ul.first').find('.foo');
foo.css('background-color', 'red')
foo.find('.bar').css('background-color', 'green');
})
$("#test2").click(function(){
//通过end连贯处理
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
})
end与addBack
大多数jQueryDOM遍历方法来操作jQuery对象实例，并创建一个新的对象，匹配一个不同的DOM元素集合。
当发生这种情况时，实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。
当我们需要返回到前一个状态时，我们可以使用end()进行出栈操作，来返回栈中的前一个状态。
end()方法主要用于jQuery的链式属性中。当没有使用链式用法时，我们通常只是调用变量名上的前一个对象，所以我们不需要操作栈。
使用end()时，我们可以一次性调用所有需要的方法：
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
链式的原理就是要返回当前操作的上下文。
下面的代码是错误的：
$('ul.first').find('.foo').css('background-color', 'red').find('.bar').css('background-color', 'green');
上面的代码因为上下文被切换了，所以执行find(‘bar’)时就出错了。
下面的代码是正确的写法：
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。
然后end()返回调用find()之前的状态。因此，第二次 find() 将只会查找 <ul class="first"> 中的 '.bar'，
而不是继续在<li class="foo">中进行查找，结果是将匹配到的元素的背景色变成绿色。
上述代码的最终结果是：第一个列表中的第 1 和第 3 个列表项的背景色有颜色，而第二个列表中的任何项目都没有背景色。
总的来说：end方法就是回溯到上一个Dom合集,因此对于链式操作与优化，这个方法还是很有意义的。
源码实现
既然是回溯到上一个DOM合集，那么肯定end方法中返回的就是一个jQuery对象了，所以我们看源码其实就是返回prevObject对象了，如下代码：
end: function() {
return this.prevObject || this.constructor(null);
}
prevObject在什么情况下会产生？
在构建jQuery对象的时候，通过pushStack方法构建，如下代码：
jQuery.fn.extend({
find: function(selector) {
//...........................省略................................
//通过sizzle选择器，返回结果集
jQuery.find(selector, self[i], ret);
// Needed because $( selector, context ) becomes $( context ).find( selector )
ret = this.pushStack(len > 1 ? jQuery.unique(ret) : ret);
ret.selector = this.selector ? this.selector + " " + selector : selector;
return ret;
}
}
可以看到通过jQuery.find后得到了结果ret这个就是通过纯的DOM节点，那么如果变成一个jQuery对象呢？
接着我们看pushStack对象，作用就通过新的DOM元素去创建一个新的jQuery对象
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;
}
流程解析：
1、首先构建一个新的jQuery对象，因为constructor是指向构造器的，所以这里就等同于调用jQuery()方法了，返回了一个新的jQuery对象；
2、然后用jQuery.merge语句把elems节点合并到新的jQuery对象上；
3、最后给返回的新jQuery对象添加prevObject属性，我们看到prevObject其实还是当前jQuery的一个引用罢了，
所以也就是为什么通过prevObject能取到上一个合集的原因了。
实例代码：
<button id="end">点击end处理</button>
<button id="addBack">点击addBack处理</button>
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<script type="text/javascript">
//.end()jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。
//当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。
//如果还需要包含先前的元素集合，.addBack()
$("#end").click(function(){
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
})
//addBack包含了自身的选择器
$("#addBack").click(function(){
$('.foo').nextAll().addBack()
.css('background-color', 'red');
})
</script>
仿栈与队列的操作
jQuery既然是模仿的数组结构，那么肯定会实现一套类数组的处理方法，比如常见的栈与队列操作push、pop、shift、unshift、求和、遍历循环each、排序及筛选等一系的扩展方法。
jQuery提供了.get()、:index()、 :lt()、:gt()、:even()及 :odd()这类索引值相关的选择器，他们的作用可以过滤他们前面的匹配表达式的集合元素，筛选的依据就是这个元素在原先匹配集合中的顺序。
我们来分别看一下这几个选择器的实现原理:
get方法--是通过检索匹配jQuery对象得到对应的DOM元素，如下代码实现：
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);
}
jQuery查询出来的是一个数组的DOM集合，所以就可以按照数组的方法通过下标的索引取值，当然如果num的值超出范围，
比如小于元素数量的负数或等于或大于元素的数量的数，那么它将返回undefined。 假设我们页面上有一个简单的无序列表，如下代码：
<ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul>
如果指定了index参数，.get()则会获取单个元素，如下代码：
console.log( $( "li" ).get( 0 ) );
由于索引 index 是以 0 开始计数的，所以上面代码返回了第一个列表项<li id="foo">foo</li>。
然而，这种语法缺少某些 .get() 所具有的附加功能，比如可以指定索引值为负值：
console.log( $( "li" ).get(-1) );
负的索引值表示从匹配的集合中从末尾开始倒数，所以上面这个例子将会返回列表中最后一项：<li id="bar">bar</li>。
由于是数组的关系，所以我们有几个快速方法，比如头跟尾的取值：
first: function() {
return this.eq( 0 );
},
last: function() {
return this.eq(-1);
},
实例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<ul>
<li id="a">aoo</li>
<li id="b">bar</li>
<li id="c">car</li>
</ul>
打印出$$("li").get(1)
<div id="aaron"></div>
<script type="text/javascript">
var $$ = ajQuery = function(selector) {
return new ajQuery.fn.init(selector);
}
ajQuery.fn = ajQuery.prototype = {
init: function(selector) {
this.selector = selector;
//模拟出数组格式
var results = document.querySelectorAll(selector);
for (var i = 0; i < results.length; i++) {
this[i] = results[i];
}
return this;
},
constructor: ajQuery
}
ajQuery.fn.init.prototype = ajQuery.fn
ajQuery.extend = ajQuery.fn.extend = function() {
var options, src, copy,
target = arguments[0] || {},
i = 1,
length = arguments.length;
//只有一个参数，就是对jQuery自身的扩展处理
//extend,fn.extend
if (i === length) {
target = this; //调用的上下文对象jQuery/或者实例
i--;
}
for (; i < length; i++) {
//从i开始取参数,不为空开始遍历
if ((options = arguments[i]) != null) {
for (name in options) {
copy = options[name];
//覆盖拷贝
target[name] = copy;
}
}
}
return target;
}
ajQuery.fn.extend({
get: function(num) {
if (num != null) {
return (num < 0 ? this[num + this.length] : this[num])
} else {
return [].slice.call(this);
}
},
setName: function(myName) {
this.myName = myName
return this;
},
getName: function() {
$("#aaron").html(this.myName)
return this;
}
})
$("#aaron").html( $$("li").get(1) )
</script>
</body>
</html>
get与eq的区别
.eq() 减少匹配元素的集合，根据index索引值，精确指定索引对象。 .get() 通过检索匹配jQuery对象得到对应的DOM元素。
同样是返回元素，那么eq与get有什么区别呢？
eq返回的是一个jQuery对象，get返回的是一个DOM对象。举个例子：
$( "li" ).get( 0 ).css("color", "red"); //错误
$( "li" ).eq( 0 ).css("color", "red"); //正确
get方法本质上是把jQuery对象转换成DOM对象，但是css属于jQuery构造器的，DOM是不存在这个方法的，如果需要用jQuery的方法，我们必须这样写：
var li = $( "li" ).get( 0 );
$( li ).css("color", "red"); //用$包装
取出DOM对象li，然后用$再次包装，使之转变成jQuery对象，才能调用css方法，这样要分2步写太麻烦了，所以jQuery给我们提供了一个便捷方法eq()。
eq()的实现原理就是在上面代码中的把eq方法内部转成jQuery对象：
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
上面实现代码的逻辑就是跟get是一样的，区别就是通过了pushStack产生了一个新的jQuery对象。
jQuery的考虑很周到，通过eq方法只能产生一个新的对象，但是如果需要的是一个合集对象要怎么处理？因此jQuery便提供了一个slice方法：
语法：
.slice( start [, end ] )
作用：
根据指定的下标范围，过滤匹配的元素集合，并生成一个新的 jQuery 对象。
因为是数组对象，意味着我们可以用silce来直接取值了，所以针对合集对象我们可以这样写代码：
var arr = [] arr.push( this.slice(start[,end]) ) this.pushStack（arr）
这个this指的是jQuery对象，因为jQuery对象是数组集合，所以我们可以通过原生的silce方法直接取到集合数，然后通过包装处理即可了。
slice: function() {
return this.pushStack( slice.apply( this, arguments ) );
},
示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script type="text/javascript">
$("td:eq(2)").css("color", "red")
$('li').eq(2).css('background-color', 'red');
$('li').eq(-2).css('background-color', 'red');
</script>
</body>
</html>
迭代器
迭代器是一个框架的重要设计。我们经常需要提供一种方法顺序用来处理聚合对象中各个元素，而又不暴露该对象的内部，这也是设计模式中的迭代器模式(Iterator)。
jQuery中的$.each方法就是一个典型的迭代器，通过each我们可以传入额外的function，然后来对所有的item项进行迭代操作，如下代码：
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});
针对迭代器，这里有几个特点：
访问一个聚合对象的内容而无需暴露它的内部。
为遍历不同的集合结构提供一个统一的接
从而支持同样的算法在不同的集合结构上进行操作。
遍历的同时更改迭代器所在的集合结构可能会导致问题。
简单的说：封装实现，然后迭代器的聚合对象不用关心迭代的过程，从而符合SRP原则。
抛开jQuery的each方法，我们自己实现一个有简单的迭代器功能的代码：
function each(obj, callback) {
var i = 0;
var value;
var length = obj.length;
for (; i < length; i++) {
callback(obj[i]);
}
}
var arr = ['a', 'b', 'c'];
each(arr, function(name) {
console.log(name);
})
这样就满足了迭代模式的设计原则，对于集合内部结果常常变化各异，我们不想暴露其内部结构，但又想让客户代码透明地访问其中的元素，通过回调把逻辑给解耦出来。但是这样的处理其实太简单了，我们还要考虑至少四种情况：
聚合对象，可能是对象，字符串或者数组等类型
支持参数传递
支持上下文的传递
支持循环中退出
1、简单回调
function each(obj, callback) {
var i = 0;
var value;
var length = obj.length;
for (; i < length; i++) {
callback(obj[i]);
}
}
var arr = ['a', 'b', 'c'];
each(arr, function(name) {
console.log(name);
})
这样就满足了迭代模式的设计原则，对于集合内部结果常常变化各异，我们不想暴露其内部结构，但又想让客户代码透明地访问其中的元素，通过回调把逻辑给解耦出来。但是这样的处理其实太简单了，我们还要考虑至少四种情况：
聚合对象，可能是对象，字符串或者数组等类型
支持参数传递
支持上下文的传递
支持循环中退出
我们简单的修改一下上面的代码：
function each(obj, callback, context, arg) {
var i = 0;
var value;
var length = obj.length;
for (; i < length; i++) {
value = callback.call(context || null, obj[i], arg);
if (value === false) {
break;
}
}
可见只要通过回调函数callback返回的ture/false的布尔值结果就可以来判断当前是否要强制退出循环
实例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
function each(obj, callback, context, arg) {
var i = 0;
var value;
var length = obj.length;
for (; i < length; i++) {
callback.call(context || null, obj[i], arg);
}
}
var arr = ['a', 'b', 'c'];
each(arr, function(name, arg) {
$('body').append('<li>' + name + '</li>')
}, this, 'aaa')
function each(obj,callback,context,arg){
var i=0;
var value；
var length=obj.
}
</script>
</body>
</html>
