jQuery源码分析之整体框架

时间:2022-11-13 16:35:51

之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总结的整体框架,具体说明都注释在每一句后面。

(function(){
首先利用匿名函数将代码包裹在里面,防止与其他代码冲突和污染了全局环境。 (21,94):定义了一些变量和函数,jQuery = function(selector,context){return
new jQuery.fn.init(selector,context)},我们一般调用jQ的方法都是通过对象来调用的,所以jQuery这个函数返回的是一个jQuery对象。 (96,283):在jQuery对象的原型上添加属性和方法,所以jQuery其实也是一个面向对象的编程。 (285,347):extend:JQ的继承方法,方便后面插件的拓展。 (349,817):jQuery.extend():拓展一些工具方法,什么是工具方法,jQuery方法一般有两种,一种是$().css()这样的实例化方法,另一种就是$.trim()这种静态工具方法。 (877,2856):Sizzle:复杂选择器的实现。 (2880,3042):Callbacks:回调对象:函数的统一管理
例如:function fn1(){ alert(1); }
function fn2(){ alert(2); }
var cb = $.Callbacks();
cb.add(fn1);
cb.add(fn2);
cb.fire();//1,2 (3043,3183):Deferred:延迟对象:对异步的统一管理
例如: var def = $.Deferred;
setTimeout(function(){
alert(1);
def.resolve();
},1000);
def.done(function(){//先把函数存在def对象中,只有当对象触发resolve()方法才会执行。
alert(2);
}//这样函数就能按照顺序执行,其实用的是回调的原理。 (3184,3295):support:功能检测。 (3308,3652):data():数据缓存。 (3653,3797):queue():队列管理(入队)
:dequeue():(出队) 主要用于类似运动效果等animate。 (3803,4299):attr()、prop()、val()、addClass()等对元素属性的操作。 (4300,5128):on()、trigger()等对事件操作的相关方法。 (5140,6057):DOM操作:添加、删除、获取、包装等。 (6058,6620):css():样式的操作。 (6621,7854):提交的数据和ajax()操作。 (7855,8584):animate():运动的操作。 (8585,8792) :offset():位置与尺寸的方法。 (8804,8821):JQ支持模块化的模式,包括AMD与commondJS。 (8826)window.jQuery = window.$ = jQuery。封装完之后,就要对外提供接口,才能使用,将jQuery对象挂载在window对象上,对外提供的接口是jQuery和$。
})()

上面就是jQuery源码的整体框架,后面就会对每一个部分进行分析和学习总结,相信通过阅读jQuery源码,将会提高自己对JS的理解和编码能力