逐行分析jQuery源码的奥秘之jQuery的整体框架

对jQuery的使用一直停留在按照API使用的阶段，一直很好奇jQuery这么一个复杂的框架是怎么一点一点写出来的。jQuery的源代码里道理有什么值得界面的理念和和思想。借着在网上看视频教程的机会，决心仔细研就一下jQuery的源代码，并做笔记记录。

 

视频课件地址：

http://study.163.com/course/courseMain.htm?courseId=465001#/courseMain

有兴趣的小伙伴可以一起学习讨论

 

这次拿来分析的jQuery源码版本为2.0.3

可以从jQuery网站上直接下载。链接为：http://www.jquery.com/jquery-2.0.3.js

整个源代码一共包含：8830行代码。

 

打开jquery里的源代码，我们发现整个jQuery源代码是包含在下面这个结构中：

(function(){

//jQuery的源代码

})();

 

这是Js中的匿名函数自执行的写法。这么写的好处：

1、放在这里的代码在浏览器加载完成之后会自动执行；

2、函数内部的变量和方法都是的作用域都在函数内部，不会和其他代码相互影响。

 

那么jQuery是如何在浏览器中给其他代码使用的？

秘密就在：8823行

// If there is a window object, that at least has a document property,
// define jQuery and $ identifiers
if ( typeof window === "object" && typeof window.document === "object" ) {
	window.jQuery = window.$ = jQuery;
}

 jquery源代码的主题框架如下：

(function(){

    (21  , 94) 定义了一些变量和函数 jQuery=function();
   
    (96  , 293) 给jQuery对象添加一些方法和属性;
   
    (285 , 347) extend:jQuery扩展方法;
   
    (349 , 817) jQuery.extend : 扩展一些工具方法;
   
    (877 , 2856 ) Sizzle : 复杂选择器的实现;
   
    (2880, 3042 ) Callbacks : 回调对象：函数的统一管理
   
    (3043, 3183 ) Deferred : 延迟对象：对异步的统一管理
   
    (3184, 3295) support : 浏览器功能检测，确定浏览器对某些功能是否支持
   
    (3380, 3652) data() : 数据缓存功能
   
    (3653, 3797) queue()/dequeue() : 队列管理
   
    (3803, 4299) attr() prop() val() addClass()等方法，对元素属性的操作
   
    (4300, 5138) on() trigger()等方法，事件相关的方法，事件管理
   
    (5140，6057) DOM操作：添加 删除 包装 获取 DOM筛选
   
    (6058, 6620) css() ： 样式操作
   
    (6621, 7854) 提交的数据和Ajax()操作:ajax() load() getJson()
   
    (7855, 8584) animite() : 运动的方法
   
    (8585, 8792) offset() :位置与尺寸的方法
   
    (8804, 8821) JQuery对模块化的支持
   
    (8826) window.jQuery = window.$ = jQuery;//对外提供的接口
   
})();