浅析jQuery源码之整体架构 - 石沉大海

接触框架久了，其实很少使用jQuery了，大多数使用的还是原生的JavaScript，以及框架本身。但是想想大学前两年的比赛，使用最多的还是jQuery，所以觉得它的源码还是有必要读一下的，里面除了大量的兼容浏览器的代码，其余的就是封装jQuery对象的方法，看看这些可以发出代码原来可以这样写的感叹。注：不建议新手看，以下jQuery简写jQ。

这次把参考文章放在前头，主要是下面是自己理解可能表达上并不是能让每一个人理解。
【深入浅出jQuery】源码浅析–整体架构 jQuery 2.0.3 源码分析core - 整体架构

jQuery的使用方式

想想我们是怎么使用jQ的，好像就是以下的几种方式。

// 事件绑定
$(".btn").on("click",function(){
    console.log("click do sth")
})
jQuery.ajax({xxxx})

有没有发现一点，调用$(".btn")极像一个函数对不？而jQuery.ajax极像一个对象再调用自己方法对不？这时候有一个问题了，因为$ = jQuery，所以又是函数又是一个对象，让我想到一个构造函数呀！那怎么调用自己的方法呢？噢，自己的方法都绑定在自己的prototype(原型)上，其实这样就是jQ基本的思路了。

解析

上诉我们已经知道了，jQ的基本思路。如下代码解释：

var jQuery = function(selector,context){
    //return ....
}
jQuery.prototype={
    // methods
}

但回想以往我们使用的过程中，发现每一个jQ对象是不一样的，便联系到了每一个对象其实jQ实例化出来的一个对象。于是代码就多这样的部分：

var jQuery = function(selector,context){
    return  new jQuery.prototype.init(selector,context)
}
jQuery.prototype={
    // methods
    init:function(selector,context){
        this.selector = selector
        this.context = context
        return this
    },
    addClass:function(){},
    toggleClass:function(){},
    // more methods 
    ...
}

当然返回的对象并不能调用jQuery.prototype的方法，这时候想到了继承的方法：

1	jQuery.prototype.init.prototype = jQuery.prototype

这样一来，返回的对象就有jQ原型上的方法了。
当然jQ很有一个很重要的使用方法就是链式调用，这个的解决方案就是在一些封装好的API最后return this，就能解决这个问题了。

当然，上述仅仅是说到了一些整体框架的思路点而已，而看了jQ源码的人会发现jQ将静态和对象方法封装在各自的extend上，而该函数是一个深拷贝的函数，使用这样的方式可以让各个对象功能可以独立开发，当你看到了jQ各个文件的时候便明白这样处理的好处了。

写本文的时候，算是给自己使用jQ的时光画上一个小结束符吧。希望以上的思路可以帮助理解jQ的整体框架的思路，共勉一同遇见最好的自己！