逐行分析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;//对外提供的接口 })();
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17