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

Posted 2021-04-08 烟雨风飘渺

在学习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的版本，让大家来分析。

文件我已经下载好了，那我把他打开。

我们从第一行开始到最后一行，一共有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