在学习jQuery源码之前，
大家需要对javascript基础知识掌握，
基本的使用方式应该比较了解。
有了以上的基础知识以后，
我们打开jQuery的网站(jquery.com)。
点击这个Download我们可以获取到最新的源码，
点进去之后了，
我们可以看到1.1.0和2.0.3的版本。
先来说说他们有什么区别，
从2点几的版本就不支持IE6,7,8了，
只支持一些高级浏览器，
所以这次源码分析选择的是2.0.3的，
为什么要选择2.0.3呢，
就是因为它不支持IE6,7,8的话，
这样的话在源码当中会减少之前的一些兼容性写法，
对于我们了解jQuery实现的原理还是有帮助的，
所以说选择2.0.3的版本，让大家来分析。
下载地址：https://github.com/fewusheng/jquery，
文件我已经下载好了，那我把他打开。
我们从第一行开始到最后一行，一共有8830行，
这个代码量是相当庞大的，
就算我们把这些注释去掉，代码量也是非常之多的。
如果一上来就给大家一行一行的讲的话，
我相信不少同学会有点懵，刚开始听就晕掉了，
所以，我们可以先对这个jquery框架进行简化处理，
把这个架子先给大家简单的搭出来，
然后，我们再逐个逐个地进行分析。
首先，新建个js文件，
比如，我这里命名的为简化JQ源码。
然后我们打开jquery，
上来有一堆注释是吧。
这会儿，我们先不着急，
等后续的时候我在给大家详细的说。
那我们先从第一行代码看起：
(function( window, undefined ) {...
这里是把一个匿名函数放到一个小括号之中，
然后到jquery源码最后的一行有一个闭合的写法。
... })( window );
这样的写法，我们来看一下。
打开我们创建的 js 文件。
首先创建一个函数，
把它放在一个小括号当中，
然后后边在加个小括号。
( function( ){
}) ( );
这种写法我们把它叫做“匿名函数自执行”
它跟普通的不加这些东西是一样的，
里面的代码也会执行，
那它有什么好处呢？
那我开个页面跟大家说一下。
比如我们在这里创建了一个变量a等于10，
在外边是找不到的，我们来试一下。
<script>
( function( ){
var a = 10;
} ) ( ) ;
console.log( a );
</script>
打印出来的结果是：
报了一个错，这里的a是调用不到的，
所以大家知道了jquery为什么把所以的代码，
都放在这个匿名函数当中，
其作用就是想让这些代码变成局部的，
这样就可以防止跟其它代码发生冲突,互相不影响。
jquery光把这些内容变成局部的，也是不够的，
它需要对外提供接口，我们才可以在外边找到。
所以说怎样从匿名函数对外提供接口，
做法很简单，也有很多方法。
比如说有一种方法就是你要对外提供的接口，
挂在到window的下边。
<script>
(function(){
var a = 10;
function $(){
console.log(a);
};
window.$ = $;
})( );
$();
</script>
所以在这个地方再去调用的是window下的$,
也就是相当于调用的$，
我们打开网页刷新一下。
打印结果是：
这时的结果就找到了，
所以说呢jquery其实它也是这样做的，
我们打开jquery看到里面定义了很多变量，
除了变量还有很多函数，所以我们来写一下，
从21行到94行，定义了一些变量和函数。
(function(){
(21 , 94)
定义了一些变量和函数
})( );
其中，有一个函数是特别重要的，
就是下边我们看到jQuery。
把它写在我们的js文件里。
(function(){
(21 , 94)
定义了一些变量和函数
jQuery = function(){}
})( );
其实这个jQuery就是我们平时用的
$()去找东西，jQuery()去找元素这个对外的接口，
这里它是一个局部的函数，我们要怎样找到它呢？
就要向上面说过的要提供对外的接口，
所以在jQuery里面对应的接口在8826行。
这里就是把 jQuery 函数挂在到了 window 下边，
或者 window 下的 $ ，
所以说我们就可以通过外边来找到 jQuery，
或者说通过$ 找到 jQuery 这个函数，
这就是对外提供的接口。
接下来我们继续网下看，到了96行，
这里我们看到了jQuery的prototype，
看到prototype我们就知道这是原型，
所以说原型是面对对象的东西，
从而得知了jQuery就是基于面向对象的程序,
所以说从96行开始到283行结束，
这些就是给jQuery对象，添加一些方法和属性。
接下来，
我给大家说一下为什么jQuery是基于面向对象的程序。
<script>
$('#div1').css();
$('#div1').html();
// 像不像我们平时使用的面向对象啊，
// 比如说我建一个数组对象
var arr = new Array();
// 这样了，我就可以在这些数组中写一些方法
arr.push();
arr.sort();
</script>
大家来看看，
之所以push和sort可以调用的话，
说明前面是对象在调用这个方法。
这种写法特别类似于我们的jQuery的写法，
那么大家就知道了，
如果$('#div1')是个对象的话，
就是不是可以这样去写了啊。
所以说这个和面向对象是一样的，
只不过$('#div1')不是一个对象，
它只是一个函数调用，
如果说它的执行结果是对象，
是不是也可以？
我们接着刚才看的那个jQuery函数，
可以发现函数执行完了后，
结果 rerun 当中就是一个new构造函数的过程，
所以说返回的就是一个jQ对象啊，
既然可以返回的是对象，
那么这个对象就可以调用这个方法了。
我们继续，从285 - 347行，
jQuery.extend = jQuery.fn.extend = function() {
......
};
extend是jq中继承的一个方法，
它的作用就是希望后续添加的代码，
都可以通过extend方法，
把它挂在到jQuery对象当中。
利用继承有利于后续的扩展，
和插件的扩展。
接着，从349 -817行，
jQuery.extend({
...
});
这一块就是扩展工具的方法，
在jQuery给了我们两种操作代码的方式，
<script>
// 一种是
$().css();
$().html();
// 还有一种是
$.trim();
$.proxy();
</script>
它们还是有区别的，
上面那种它是面向对象实例的方法，
下面这里是函数下边扩展的方法，
这就是扩展一些静态的方法。
所以在jQuery当中，
来给面向对象扩展静态属性和静态方法的时候，
我们就把它叫做扩展工具方法。
下边这种方法既可以给jq用也可以给原生的js来用，
而上面的方法只能给jQuery对象用。
所以说扩展工具方法用利于
后期我们写东西的时候用，
其实我们可以把静态方法，
看成是在jQuery中最底层的一个东西，
而上面的是上一层或更高级的东西，
它们俩是这样一种关系，
所以说很多方法都是实例方法，
里面调的都是工具方法。
第一集，[No.1] jQuery源码解析—搭建框架（1）。
别走开，下集更精彩。
喜欢文章的小伙伴，
希望大家多多转发分享，
你的分享就是我的动力！
喜欢 分享 or
网友评论