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

Posted 2021-04-08 烟雨风飘渺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[No.3] jQuery源码解析—搭建框架相关的知识，希望对你有一定的参考价值。

昨天有点事耽误了，

所以没能及时更新，

只能跟大家说声:‘抱歉了’

今天咱们继续！

从3308-3654行，

这一块实现的是data的方法，

data的作用是数据缓存。

在jQuery中的data怎么用，

其实很简单。

// 比如说这里给它扩展一个'name'

$('#div1').data('name','Hello');

// 若我们想找到这个Hello的话，

// 也可以通过data，进行获取

$('#div1').data('name');// Hello

// 这里就是添加数据，获取数据

在jQuery中这些扩展的内容并没扩展到元素身上，

如果说你直接把一个数据扩展到元素身上，

可以是可以，但是你扩展的不是基本类型，

而是一个对象类型的话，

可能会出现内存泄露的问题，

所以说在jQuery中数据缓存的挂载机制是非常神奇的，

不是说是简简单单地扩展到元素身上，

而是通过了一系列的操作，

中间有一些操作方法能避免大数据量添加在元素身上，

防止这个元素的内存泄露，这个到时我在详细给大家来讲。

再往后，我们从3656行开始到3797行结束，

这一块实现的功能叫做queue，

queue实现的功能是队列管理，

这里有queue和dequeue的方法，

一个是入队，另一个是出队，

我简单跟大家说说这个队列管理，

比如说我们去买火车票，

然后是不是得排个长队，

比如前面的人买完了是不是他要离开了，

后面的人然后就接着买，

整个这个队列就叫做入队，

前面的人买完离开这就叫做出队，

在jQuery中哪里会用到入队和出队？

最常见的就是运动的效果，是吧！

比如我们在jQuery中写应用的时候经常会写个例子如下：

$('#div1').animate({left:100});

$('#div1').animate({top:100});

$('#div1').animate({width:300});

在jQuery中它是怎么运动的呢？

它是先走这个left值，

当left值之行结束之后再走top值，

top值走完之后再走这个宽度，

像这样的运动方式，是分开写的，

我们都知道了定时器是异步的，

所以这个分开写怎么才能保证顺序呢？

这里就利用了队列管理queue()，

它的作用就是把这三个存到队列当中，

然后当一个走完之后，

就可以让当前的这个调用出队的方法，

如果说不调用出队的方法话，

后续的代码也不会执行，

就相当于这个队列当中，

前面的哪一位没走，

所以说都是通过队列来管理的，

在jQuery这除了运动要用到队列，

其实我们平时也会用到这个方法，

到时候我们再来讲这个队列。

接下来，我们再来往下来看，

从3803行到4299行结束，

这块实现了很多方法，

比如:attr(),prop(),val(),addClass()等...

这一块提供了这么多方法，

它的作用就是对元素属性地操作，

因为在元素身上有很多属性，

这个时候我们再说，

这个平时我们用得比较多，

现在，我就暂时不给大家一一演示属性方法实现了。

属性操作完了之后，我们从4300行开始，

到5128行结束，

这一块是on(),trigger()等方法的实现，

它的作用就是事件操作的相关方法，

比如说事件的添加删除，主动触发，事件委托等，

跟事件用关的都是这一块的内容，

这一块代码也很多，咱们到时再详细地跟大家讲具体的内容。

接着往后，从5140行到6057行，

这一块实现了DOM操作的方法，

包括DOM的添加,删除,获取,包装....

具体这些DOM操作怎么实现，

我们到时候再具体来看。

从6058行开始到6620行结束，

这一块执行的css的方法，

作用是专门针对样式的操作，

这一块代码量庞大的原因是:

在这个方法中它会做很多处理，

包括有些兼容性，浏览器支持程度，

比如说像boxSize有些浏览器不支持，

到时候我们在具体来看样式操作。

接着从6521行到7854行，

这一块实现的是提交的数据和ajax的操作，

主要是实现ajax功能的，

ajax功能包括ajax(),load(),getJson ...

到时候咱们再来仔细讲，

ajax咱就先这样过了哈。

从7855开始到8584行，

这一块实现的就是运动animate(),

还有一些封装好了的运动效果，

比如：show()等等方法，

这一块，运动也是很复杂的，

到时候我们可以具体的来讲一讲。

接着，从8585开始到8792结束，

这一块实现了位置与尺寸的一些方法，

比如说获取一个元素距离屏幕的距离，

或者是获取可视区的宽可视区的高，

滚得距离等等这些方法。

然后，从8804行到8821行结束，

这一块实现的是jQuery支持模块化的模式。

大体上就差不多把结构给大家搭出来了。

(function(){

        √(21 , 94) 定义了一些变量和函数 jQuery = function(){};

        √(96 , 283) 给JQ对象，添加一些方法和属性

        √(285 , 347) extend : JQ的继承方法

        √(349 , 817) jQuery.extend() : 扩展一些工具方法

        √(877 , 2856) Sizzle : 复杂选择器的实现

√(2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理

√(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理

√(3184 , 3295) support : 功能检测

√(3308 , 3652) data() : 数据缓存

√(3653 , 3797) queue() : 队列方法 : 执行顺序的管理

√(3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作

√(4300 , 5128) on() trigger() : 事件操作的相关方法

√(5140 , 6057) DOM操作 : 添加删除获取包装 DOM筛选

√(6058 , 6620) css() : 样式的操作

√(6621 , 7854) 提交的数据和ajax() : ajax() load() getJSON()

√(7855 , 8584) animate() : 运动的方法

  √(8585 , 8792) offset() : 位置和尺寸的方法

   √(8804 , 8821) JQ支持模块化的模式

  √(8826) window.jQuery = window.$ = jQuery;

})();