jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正。望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美化工作可能不够到位,也希望大家多多见谅!
首先这篇文章要给大家分享的是:jQuery的框架结构,把框架结构简单化处理
此处我所学习使用的jQuery版本是2.0.3版本(文件已经上传到我的GitHub中,大家可以去下载,地址:https://github.com/cumtchj/jQuery2.0.3),一个相对比较老的版本,但是其实基本的功能都与新版本类似,该版本开发版代码共8830行。
此外,2.X相较于1.X版本,去除了对IE6/7/8的支持,这也使得其中减少了很多有关于兼容性的代码,便于我们去理解。
下面,我们就开始一一深入,剥开jQuery的层层外壳...
首先是一开始的部分,一部分注释,里面包含了一些jQuery的信息
接下来从第14行开始就是jQuery真正的源码了
1 (function(window,undefined){ 2 })();
此处是一个匿名函数自执行,它的好处在于,可以把代码块中所有的变量都变成局部变量,这样就不会造成对全局变量的一个污染,导致代码冲突。下面举个例子:
1 (function(){ 2 var a=10; 3 function $(){ 4 alert(a); 5 } 6 })(); 7 alert(a);//调用不到 8 $();//调用不到
但是这样一来,造成了外部调用不到内部局部变量的情况,所以需要对外提供使用内部局部变量和方法的接口
1 (function(){ 2 var a=10; 3 function $(){ 4 alert(a); 5 } 6 window.$=$;//将函数挂载到window上 7 })(); 8 $();//10
在jQuery中就是这样实现的,在前面(21,94)行,jQuery定义了一些变量和函数,在8826行
1 //(8826) 2 window.jQuery=window.$=jQuery;
将jQuery挂载到了window上,这样就使得外部可以访问到jQuery内部的变量和方法
接下来,在(96,283)行
1 jQuery.fn=jQuery.prototype={}
此处,jQuery.prototype,这表明jQuery是一个基于面向对象的程序,往后就是在给jQuery对象添加一些属性和方法。针对面向对象,下面举个例子:
1 //我们经常会这样写 2 $('#div').css(); 3 $('#div').html(); 4 //这个类似于 5 var arr=new Array(); 6 arr.push(); 7 arr.sort(); 8 //其中 9 $('#div')//是一个函数调用,但是其执行结果是一个对象
接下来,在(285,347)行
1 jQuery.extend=jQuery.fn.extend=function(){}
extend:jQuery的继承方法,后需添加的代码通过jQuery方法挂载到jQuery对象中,方便扩展
接下来,在(349,817)行
1 jQuery.extend()
jQuery的扩展工具方法。关于工具方法,下面做一个简单的解释:
//$()是一个对象,所以其后的方法是一个实例的方法,相对高级,调用工具方法 $().css(); $().html(); //$是一个函数,在函数下扩展方法是一个静态方法,是jQuery最底层的东西 $.trim(); $.proxy();
接下来,在(877,2856)行
sizzle:这是一个复杂选择器的实现,是第三方独立程序,这意味着以后做相关选择器开发就可单独使用sizzle
接下来,在(2880,3042)行
1 jQuery.Callbacks=function(options){}
回调对象:通过回调对象统一管理函数。有关于回调对象,下面举个例子:
1 function fn1(){alert(1)} 2 function fn2(){alert(2)} 3 var cb=$.Callbacks(); 4 cb.add(fn1); 5 cb.add(fn2);//将fn1,fn2添加到cb上 6 cb.fire();//1,2 7 cb.remove(fn2);//移除fn2 8 cb.fire();//1
接下来,在(3043,3183)
1 jQuery.extend({Deferred:function(func){}})
Deferred:延迟对象,对异步的统一管理。下面有关于延迟对象,举一个简单的例子:
1 setTimeout(function(){ 2 alert(1); 3 },1000); 4 alert(2);//2,1
因为setTimeout定时器是一个异步的,所以输出的结果为2,1,下面我们稍作修改:
1 var dfd=$.Deferred(); 2 setTimeout(function(){ 3 alert(1); 4 dfd.resolve(); 5 },1000); 6 dfd.done(function(){ 7 alert(2) 8 });//1,2
当使用了延迟对象以后,程序只有执行到resolve方法才会去执行done中的方法,这样输出结果就是1,2了。
接下来,在(3184,3295)行
1 jQuery.support=(function(support){});
support:功能检测,无需判断浏览器,通过判断功能检测浏览器版本
例:3199行CheckBox默认状态,webkit中新版本是'on',老版本是''
接下来,在(3308,3652)行
data()方法:有关于数据缓存的部分。举个例子:
1 $('#div1').data('name','hello'); 2 $('#div1').data('name');//hello
接下来,在(3653,3797)行
1 jQuery.fn.extend({queue:function(type,data){}})
queue:队列管理,入队 dequeue:出队
$('#div1').animate({left:100}); $('#div1').animate({top:100}); $('#div1').animate({width:100});//left->top->width 通过队列管理执行顺序
这个就是通过queue队列管理实现的顺序进行动画。
接下来,在(3803,4299)
1 jQuery.fn.extend({attr:function(name,value){}})
其中定义了attr(), prop(),val(),addClass()...方法,对元素属性的操作。
接下来,在(4300,5128)行
其中定义了on() trigger()...方法,事件操作相关方法
接下来,在(5140,6057)行
定义了DOM操作的方法:添加,删除,获取,包装,筛选...
接下来,在(6058,6620)行
css():样式的操作
接下来,在(6621,7854)行
定义了提交数据和ajax():ajax(),load(),getJson()...
接下来,在(7855,8584)行
animate():运动的操作
接下来,在(8585,8792)行
offset()...:位置和尺寸的方法
最后,在(8804,8821)
jQuery支持模块化的模式
这样,jQuery的整个架构简化就完成了,下面再梳理一下:
1 (function(){ 2 (21 , 94) 定义了一些变量和函数 jQuery = function(){}; 3 (96 , 283) 给JQ对象,添加一些方法和属性 4 (285 , 347) extend : JQ的继承方法 5 (349 , 817) jQuery.extend() : 扩展一些工具方法 6 (877 , 2856) Sizzle : 复杂选择器的实现 7 (2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理 8 (3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理 9 (3184 , 3295) support : 功能检测 10 (3308 , 3652) data() : 数据缓存 11 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理 12 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作 13 (4300 , 5128) on() trigger() : 事件操作的相关方法 14 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选 15 (6058 , 6620) css() : 样式的操作 16 (6621 , 7854) 提交的数据和ajax() : ajax() load() getJSON() 17 (7855 , 8584) animate() : 运动的方法 18 (8585 , 8792) offset() : 位置和尺寸的方法 19 (8804 , 8821) JQ支持模块化的模式 20 (8826) window.jQuery = window.$ = jQuery; 21 })();
谢谢大家来看我的博客(* ̄︶ ̄)
jQuery源码逐行分析学习01(jQuery的框架结构简化)相关推荐
- jQuery源码研究分析学习笔记-jQuery.extend()、jQuery.fn.extend()(八)
jQuery.extend().jQuery.fn.extend()主要用于编写插件和处理函数参数. jQuery.extend(deep,target,objdect1 [,objectN]) jQ ...
- jQuery源码研究分析学习笔记-jQuery.buildFragment()(六)
DocumentFragment是一种特殊的Node,它作为其他节点的一个临时容器,像document节点咿呀,DocumentFragment是独立的,而不是任何其他文档的一部分,它的parentN ...
- jQuery源码研究分析学习笔记-jQuery.fn.init()(五)
$()=jQuery(),二者即是返回的构造函数jQuery.fn.init()实例对象 jQuery = function( selector, context ) {return new jQue ...
- jQuery源码研究分析学习笔记-jQuery.deferred()(12)
JS是单线程语言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题. 但js暴露了应用开发中的一个严重问题,单线程环境看起来对用 ...
- jQuery源码研究分析学习笔记-静态方法和属性(10)
jQuery源码中定义了一些重要的静态属性和方法,它们是其他模块实现的基础,整体的源码结构如下 //把window.jQuery和winow.$备份到局部变量_jQuery和_$_jQuery = w ...
- jQuery源码学习第二天--jQuery的extend扩展
Jquery中的extend扩展 一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...
- [转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- jQuery源码学习之五 (jQUery继承方法)
jQuery 利用extend进行扩展. 参考jQuery API关于extend 的用法: $.extend([deep],target,object1,objectN) $.fn.extend(o ...
最新文章
- 远程办公中的IT女性:工作量增加3倍,离职率却下降近50%
- 原生app跳html页面传值,HTML页面跳转及参数传递问题
- 51CTO学院三周年-最受学员喜爱讲师评选大赛
- windows 64位上eclipse访问hadoop
- Spring MVC工作原理 及注解说明
- mysql命令行执行外部文件
- linux 关闭web服务器端口,linux(solaris)下如何关掉端口及服务
- 给linux内核传递数组,数组与指针 - Linux C编程实战之路_Linux编程_Linux公社-Linux系统门户网站...
- 给Xcode增加复制行、删除行快捷键的方法
- 苹果运营商中移动苹果互盼“在一起” 最快Q3推4G移动版iPhone
- mtk6595能否运行linux,“被妖魔化”的联发科MTK6595到底如何?
- 破解ACCESS(2000) .mdb格式文件密码手记
- 软件评测师考试备考资料分享
- 联想计算机 经常蓝屏怎么办,一分钟看懂电脑蓝屏(内附解决方案)
- feign接口返回泛型设置属性为null问题
- Python网络爬虫精要
- 【Unifying Motion Deblurring and Frame Interpolation with Events】阅读笔记
- Clickhouse 函数基础入门
- 基于MATLAB的矩阵基础(附例题与代码)
- Troubleshooting: High Version Count Issues (文档 ID 296377.1)
热门文章
- com.alibaba.fastjson.JSON ,对象 转JSON字符串时,对字段名做了转换,需要注意啦
- php field as key,php – $_POST as $key =gt; $value使用复选框
- Windows10退出微软账户使用本地账户
- Redis_15_Redis线程模型与事件
- This is deprecated. The new driver class is com.mysql.cj.jdbc.Driver.的解决办法及原因
- 传统算法与神经网络算法,神经网络是机器算法吗
- QNX下音频解码器SGTL5000驱动的调试
- 超市账单管理系统项目学习总结
- 使用位运算实现乘法和乘方运算
- Windows 7/Windows Server 2008 R2深入核心剖析