[No.1] jQuery源码解析—搭建框架（1）

在学习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