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 })();

谢谢大家来看我的博客(* ̄︶ ̄)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 是一个非常流的 JavaScript 库,它简化了 JavaScript 代码的编写和操作 DOM 的过程。以下是 jQuery 码的详解: ```javascript (function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { // 如果是 CommonJS 规范,则添加到模块中 // 在 Node.js 环境中,module 对象代表当前模块,exports 对象是 module 的属性,用于指定模块对外输出的接口。 // 通过 exports 对象把模块导出,其他文件就可以通过 require() 函数来引用该模块。 module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { // 如果是浏览器环境,则将 jQuery 添加到全局对象 window 中 factory( global ); } // 在这里传入了两个参数,global 和 factory,分别表示全局对象和一个工厂函数 }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { "use strict"; var deletedIds = []; var document = window.document; var slice = deletedIds.slice; var concat = deletedIds.concat; var push = deletedIds.push; var indexOf = deletedIds.indexOf; // ... ``` 这段代码定义了一个立即执函数,其目的是为了防止变量污染全局作用域。如果是在 Node.js 环境中,那么需要将 jQuery 添加到模块中,否则将 jQuery 添加到全局对象 window 中。然后定义了一些变量,包括 deletedIds、document、slice、concat、push 和 indexOf 等。这些变量都是为了后面的代码服务。 ```javascript var version = "3.6.0", // 定义了一个空函数 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, // ... ``` 这里定义了 jQuery 的版本号和 jQuery 函数。jQuery 函数是一个工厂函数,用于创建 jQuery 对象,其实现是通过调用 jQuery.fn.init 函数实现的。 ```javascript jQuery.fn = jQuery.prototype = { // jQuery 对象的方法和属性 }; jQuery.fn.init.prototype = jQuery.fn; ``` 这里定义了 jQuery 对象的原型,包括 jQuery.fn 和 jQuery.prototype。jQuery.fn 和 jQuery.prototype 是等价的,都是为了扩展 jQuery 对象的方法和属性。同时还将 jQuery.fn.init 的原型指向了 jQuery.fn,这样可以让 jQuery.fn.init 实例化出来的对象拥有 jQuery.fn 的方法和属性。 ```javascript jQuery.extend = jQuery.fn.extend = function() { // ... }; jQuery.extend({ // 一些静态方法和属性 }); jQuery.fn.extend({ // 一些实例方法和属性 }); ``` 这里定义了 jQuery 的 extend 方法,用于实现对象的合并。同时还定义了一些静态方法和属性,以及一些实例方法和属性。 ```javascript jQuery.expr = { // ... }; jQuery.expr[ ":" ] = { // ... }; ``` 这里定义了 jQuery 的表达式引擎,用于实现选择器的解析。其中,jQuery.expr 是一个对象,存储了所有的选择器类型。jQuery.expr[ ":" ] 表示的是伪类选择器。 ```javascript jQuery.ajax = function( url, options ) { // ... }; jQuery.fn.load = function( url, params, callback ) { // ... }; ``` 这里定义了 jQuery 的 ajax 和 load 方法,用于实现异步请求和载入 HTML 片段。 ```javascript var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$; jQuery.noConflict = function( deep ) { // ... }; if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } ``` 这里定义了 jQuery 的 noConflict 方法,用于解决命名冲突问题。同时还保存了 window.jQuery 和 window.$ 的引用,以便在需要时恢复原来的状态。最后,将 jQuery 和 $ 添加到全局对象 window 中。 以上是 jQuery 码的部分详解,希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值