jquery 源码解析

静态与实力方法共享设计

遍历方法

$(".a").each()　　//作为实例方法存在

$.each()　　//作为静态方法存在

Jquery源码

jQuery.prototype = {

　　each:function(callback,args){

　　　　return jQuery.each(this,callback,args);

　　}

}

实例方法取与静态方法，换句话来说静态与实例方法共享设计，静态方法挂在jquery构造器上面

方法链式调用的实现

$(“li”).eq(0).click(function(){

}).end().eq(1).click(function(){

}).end().eq(2).toggle(function(){

　　$().hide();　　

},function(){

　　$().show();

});

其含义：

找出节点，找到第一个li，并绑定click事件处理函数

返回所有li，在找到第二个

为第二个绑定click事件处理函数

为第三个li绑定click事件处理函数

DSL链式代码的好处

节约js代码

所返回的都是同一个对象，可以提高代码的效率

插件接口的设计

基于插件借口设计的好处是很多的，最重要的好处是把扩展的功能从主体框架中剥离出去，降低了框架的复杂度，接口的设计好比电脑上的配件，比如CPU，内存，硬盘都是作为独立的模块分离出去了

jquery的插件开发分为两种：

一种是挂在jquery命名空间下的全局函数，也可以称为静态方法

还有一种是jquery对象级别的方法，就是挂在jquery原型下的方法，这样通过选择器获取的jquery对象实例也能共享该方法。

提供的接口

$.extend(target,[object],[objectN])

接口的使用

jquery.extend({

　　data:function(){}

　　removeData:function(){}

})

jquery.fn.extend({

　　data:function(){}

　　removeData:function(){}

})

jquery的主题框架就是通过工厂模式返回一个内部的init构造器生成的对象，但是根据一般设计者的习惯，如果要为jquery添加静态方法或者实例方法从封装的角度讲师应该提供一个统一的接口才符合设计的。

jquery支持自己扩展属性，这个对外提供了一个接口，jquery.fn,extend()来对对象增加方法，从jquery的源码中可以看出，jquery.extend和jquery.fn.extend其实是同一方法的不同引用。

在jquery对象中有一个preobject对象，jquery内部维护这一个jquery对象栈，每个遍历方法都会找到一组新元素，然后jquery会把这组元素推入栈中。

每个jquery对象都有三个属性：context，selector和prevObejct,其中的precobject属性就指向这个对象栈中的前一个对象，而通过这个属性可以回溯到最初的DOM元素集中。

$("ul").find("li").click(function(){

　　alert(1);

}).end().click(function(){

　　alert(2);

});

jquery为我们操作这个内部对象栈提供了2个方法：end(),addBack()源码是这样的：

jQuery.fn.andSelf = jQuery.fn.addBack;

调用第一个方法只是简单的弹出一个对象(结果就是回到前一个jquery对象)，第二个方法更有意思，调用他会在栈中回溯一个位置，然后把两个位置上的元素集组合起来，并把这个新的，组合之后的元素集推入栈的上方。

end与addBack

end方法主要用于jquery的链式属性中，当没有使用链式用法时，我们通常只是调用变量名上的前一个对象，所以我们不需要操作栈。

在使用end()时，我们可以一次性调用所有需要的方法 十九回溯到上一个DOM合集，因此对于链式操作与优化，这个还是很有意义的。

precobject在构建jquery的时候，通过pushStack方法构建

源码流程解析：

首先创建一个新的jQuery对象，因为construtor是指向构造器的，所以这里就等于调用了jquery方法了，返回一个新的jquery对象。

仿栈与队列的操作

jQuery既然是模仿的数组结构，那么肯定会实现一套类数组的处理方法，比如常见的栈与队列操作push、pop、shift、unshift、求和、遍历循环each、排序及筛选等一系的扩展方法。

jQuery对象栈是一个便于Dom的查找，提供的一系列方法，jQuery可以是集合元素，那么我们怎么快速的找到集合中对应的目标元素呢？

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);
},

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 ) );
},

迭代器

迭代器是一个框架的重要设计。我们经常需要提供一种方法顺序用来处理聚合对象中各个元素，而又不暴露该对象的内部，这也是设计模式中的迭代器模式(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方法，我们自己实现一个有简单的迭代器功能的代码：

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++) {
        callback.call(context || null, obj[i], arg);
    }
}
var arr = ['a', 'b', 'c'];
each(arr, function(name, arg) {
    console.log(name, arg ,this);
}, this, 'aaa')

当然根据回调的处理，从而判断是否要立刻中断这个循环，从而节约性能，也是很简单的，我们可以通过获取处理的返回值来处理，如下代码：

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的布尔值结果就可以来判断当前是否要强制退出循环。

jQuery的each迭代器

jQuery的each方法从使用上就要分2种情况：

☑ $.each()函数
☑ $(selector).each()

$.each()函数和$(selector).each()是不一样的，后者是专门用来遍历一个jQuery对象的，是为jQuery内部服务的。

$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript始终将this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。

jQuery的实例方法最终也是调用的静态方法，我们在之前就解释过jQuery的实例与原型方法共享的设计。

其中each的实例方法如下：

可见内部是直接调用的静态方法：

each: function(callback, args) {
    return jQuery.each(this, callback, args);
},

jQuery.each静态方法：

each: function(obj, callback, args) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike(obj);

    if (args) {
        if (isArray) {
            for (; i < length; i++) {
                value = callback.apply(obj[i], args);

                if (value === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                value = callback.apply(obj[i], args);

                if (value === false) {
                    break;
                }
            }
        }

实现原理几乎一致，只是增加了对于参数的判断。对象用for in遍历，数组用for遍历。

jQuery可以是多个合集数组DOM，所以在处理的时候经常就针对每一个DOM都要单独处理，所以一般都需要调用this.each 方法，如下代码：

dequeue: function( type ) {
        return this.each(function() {
            jQuery.dequeue( this, type );
        });
    },

迭代器除了单纯的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码功能合并处理：

例如一：

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

例如二：

jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout",
    pointerenter: "pointerover",
    pointerleave: "pointerout"
}, function( orig, fix ) {
    //处理的代码
});

可以看出上面代码方法，针对相同的功能，节约了大量的代码空间