[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);

</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

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 225评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 303评论 0 1
  • 今天,更新有点晚, 但是干货不怕晚, 接着昨天讲得讲, 把第一段讲的没讲完的继续讲解。 (function(){ ...
    web_无笙阅读 87评论 0 2
  • 在线阅读 http://blog.poetries.top/FE-Interview-Questions 目录 $...
    poetries阅读 36,392评论 14 360
  • JQuery的源码看过吗?能不能简单概况一下它的实现原理? jQuery.fn的init方法返回的this指的是什...
    过往的雨阅读 704评论 0 10