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方法，咱们本身实现一个有简单的迭代器功能的代码：

一、简单回调

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 ) {
    //处理的代码
});

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