jquery 源码解析

jQuery 是一个非常常用的 js库，值得我们深入的学习。我们可以通过学习 jQuery 的源码，来知道如何规范的写代码，以及如何更好的使用 jQuery。
  但是，在研究一个 js 库之前，我们需要先对它的整体框架的设计有一个认识，这样才可以更快的深入的了解和学习。所以我们要从 jQuert 的整体框架入手，以此作为学习 jQuery 源码的开始。
  首先提一下，jQuery 的目的是为了让我们写的少，做得多，而且兼容性很好。1.x 版本的 jQuery 兼容 IE6+ 版本；2.x 版本的 jQuery 兼容 IE9+ 版本。下面开始分析 jQuery 框架的设计思路。
  我们在使用 jQuery 时，最常用的操作有两种类型，现在分别举个例子。

• 第一种： $('div').fadeIn(), $('div').addClass() 这种公用方法。
• 第二种： $.ajax(), $.each() 这种静态方法。

由上述的例子可知，不论是 $ 还是 $('div') 返回的都是一个对象，所以

var jQuery = function(selector, content){
    return new jQuery.prototype.init(selector, content);//相当于返回 jQuery.prototype
}
jQuery.prototype = {
    init: function(){
        return this;
    },
    sayName: function(){
        console.log('...')
    }
};
window.$ = window.jQuery = jQuery;

• 接下来是实现静态方法
  从原型图中是可以看出来可以直接使用的

• 首先讲解如何实现公用方法。我选择通过原型图的方式来进行分析，这样便于理解。上面的 代码对应的原型图如下所示，一看便知新建的实例无法使用 jQuery.prototype 中的函数

所以通过

jQuery.prototype.init.prototype = jQuery.prototype;

这样后，原型图如下所示，便可以使用 jQuery.prototype 中的函数的方法了。

但是，如何扩展 jQuery 和 jQuery.prototype 中的函数呢?

jQuery.extend = jQuery.prototype.extend = function(obj){
    for(var key in obj){
        this[key] = obj[key];
    }
}

这样后扩展方法如下

//静态方法
jQuery.extend({
    sayName:function(){},
})
//调用 $.sayName()

//公用方法
jQuery.prototype.extend({
    removeClass: function(){},
    append: function(){}
});
//调用 $('div').removeClass()
//     $('div').append()

每次扩展这个对象的方法只需通过这种方式即可。所以 jQuery 中的方法都可以通过这种方法实现绑定了。具体方法的实现就算出错，也不会影响整体。核心就是

jQuery.prototype.init.prototype = jQuery.prototype;