前端学习-jQuery源码学习

Posted 2020-06-19 sunshinegirl_7

jQuery 2 的版本与jQuery 1的版本相比，没有再考虑IE6，7，8的兼容问题，因此使用时如果不用考虑IE6，7，8就用jQuery 2的版本，如果需要考虑IE6，7，8就使用jQuery 1的版本。

jQuery对象是一个以DOM为对象的特殊数组，并包含大量方法，简单可以理解为：

function jQuery(){

    var jquery = [dom1, dom2, dom3];

    jquery.fn1 = function(){…};

    jquery.fn2 = function(){…};

    return jquery;

}

 

 

jQuery源码中的精髓：初始化的设计思路，选择器的设计方法，事件处理的设计方法，动画效果的设计机制，ajax封装的设计思路，插件机制的设计，兼容性处理的设计方法等。

jQuery-2.0.3.js源码一共8829行，下面划分几个部分对每部分的功能作个简单概括。

(14) 第14行到8829行，（function(window,undefined){}）(); 定义自执行匿名函数，所有源码都包括在匿名函数中。

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

(96, 283)  jQuery.fn = jQuery.prototype = {…}; jQuery.fn.init.prototype = jQuery.fn; 这里看到prototype，就是jQuery对象的原型，主要给JQ对象，添加一些方法和属性

(285, 347) extend: JQ的继承方法, 为添加后续代码提供良好的扩展性，同时扩展插件也是从该继承该应地中扩展。   jQuery.extent = jQuery.fn.extent = function(){…};

(349, 817)  jQuery.extend({…});  扩展一些工具方法（静态方法），如$.trim(), $.proxy()等。

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

(2880, 3042) Callbacks: 回调对象： 对函数的统一管理, add, remove, has, empty, disable, fireWith, fire 等。

(3043, 3183) Deferred: 延迟对象： 对异步的统一管理（定时器，ajax，script，DOM等一些需要异步处理作一下统一管理）

(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) jQuery支持模块化的模式

（8826） window.jQuery = window.$ = jQuery; jQuery的符号简写为$，把jQuery挂载到window下，这样我们使用时就可以直接用jQuery()，或$()来调用jQuery，否则jQuery在局部内，调用不到。