jquery源码学习

原创 xiaolong2122451 随笔 Jquery源码分析 271阅读 2017-05-25 09:36:47 举报

接昨天的啊!

在最开始的时候jquery在原型下面扩展了一些常用的方法, 大致代码如下:

javascript 代码

toArray : 这个方法的实现思路就是利用 数组的 slice.call( this );

get : 我们平时怎么使用get呢? 是不是$("div").get( 0 )啊, 这时候就会选择到第一个div。 先看jquery的数据结构 :

html 代码

看结构你就会明白了,get方法其实就相当于 $("div").get(0) → jquery这个对象[ 0 ]; 所以get() , eq() 这个选择到的元素都可以使用原生的方法。

pushStack : 这个方法作用是jquery对象入栈 。 什么是入栈呢?举个栗子就像进电梯一样, 先进的后出。 平时我们用的不多。

each : 就是我们平时用的each()方法, 它调用的jquery的工具方法each。 在jquery里面分为工具方法和实例方法, $("div").css() → 这种就是实例方法; $.ajax() → 这种就是工具方法; 工具方法是最底层的东西, 就相当于汽车的各种零件一样。

ready : 这个是控制dom加载的; 在jquery里面它做了很复杂的处理, 不是一个单个的东西, 是一个整体。 原理就是调用了 原生的 DOMContentLoaded 事件

slice : 和原生数组的功能差不多, 他原理呢,是调用了 jquery的入栈, 就是前面的pushStack;方法

first 、last 、 eq , end : 这三个和get是一个原理。 都是根据length,然后{}[ 第几个 ]; 当然源码不是这样写的, 其实源码当中first 和 last 都是调用eq() 这个方法, 不过呢,我们知道原来就行了, 源码肯定是很复杂的,它会做一堆的处理。

map : 是对jquery数据的二次处理, 调用的是工具方法map. $.map() ; 原理也是入栈。

昨天有个东西没说,就是在jquery当中, 凡是复杂一点的选择器, 它都是通过Sizzle进行处理, 而Sizzle是一个独立的部分, 你也可以单独下载进行使用, 官网是http://sizzlejs.com/####

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复