JQuery源码解析-整体架构的设计

最近在看jQuery的源码，查了一些资料，偶尔看到了网易云课堂里有套视频是对源码进行讲解的，是叫妙味课堂出的，看着还不错，对这方面感兴趣的推荐看下，

个人感觉很不错。所以发些文章，边学边记录。

版本：2.0.3

整体的架构：

(function(){

(21,94) 定义变量和函数，赋值JQuery

(96,283)添加JQuery的一些方法和属性

(285,347) extend JQ的继承方法

(877,2856) Sizzle：复杂选择器的实现。

(2880,3042) Callbacks:回调对象：对函数的统一管理

(3043,3183) Deferred:延迟对象：对异步的统一管理

(3184,3295) Support:功能检测

(3308,3652) data():数据缓存

(3653,3797) queue():队列管理

(3803,4299) attr() prop() val() addClass()等，对元素属性的操作。

(4300,5128) on() trigger():时间操作的相关方法

(5140,6057) DOM操作：添加删除获取包装筛选。

(6058,6620) css():样式操作（包括处理浏览器的兼容）

(6621,7854) 提交数据的ajax() load() getJson()

(7855,8584) animate() 运动方法的实现

(8585,8792) offset() 位置和尺寸等方法

(8804,8821) Jq支持模块化的支持

(8826) window.JQuery=window.$=JQuery；

})();

JQuery的源码中，所有代码是被包含在一个自执行的方法中的:

(function( window, undefined ) {
})( window );

至于为什么需要传入window对象，而不是在内部方法中直接使用，是因为有两原因：

1：为了便于压缩 2：当方法内部使用的时候，查找的速度快。

使用undefined这个参数是为了防止在方法外部将undefined赋值，例如：

var undefined=1

如果这样赋值，那undefined的值从此以后变为1，这回影响以后的判断。

对于JQuery的调用方式，属于链式调用，也就是说JQury().css()这种方式调用，

那这种方式就区别于一般的对象操作，先new出来一个对象，然后再调用原型链上的方法。

这是因为JQuery调用时，返回的是当前的对象。

例如：

function jQuery(){return new jQuery.prototype.init();
}
jQuery.prototype.init=function(){　　//初始化代码
}
jQuery.prototype.css=function(){
}
jQuery.prototy.init.prototy=jQuery.prototype;
jQuery().css();

这样调用时，就不比单独调用jQuery的init方法了，直接使用jQuery()的方法时，自动就会执行初始化方法，并返回。

这样返回的是：

jQuery.prototype.init

这个对象，这个对象上的原型并没有jQuery原型上的属性和方法，所以要执行

jQuery.prototy.init.prototy=jQuery.prototype;

把init方法的原型，指向jQuery对象的原型。这样就实现了这种调用方式。

转载于:https://www.cnblogs.com/y8932809/p/5832317.html

JQuery源码解析-整体架构的设计相关推荐

jQuery源码解析（架构与依赖模块）
jQuery设计理念引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1. ...
jQuery源码解析（架构与依赖模块）第一章理解架构
1-1 jQuery设计理念引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...
【jQuery源码】整体架构
jQuery源码可以精简为以下内容: 方框上面的代码根据Jq注释我们可以知道是对AMD规范的支持. jQuery整体上被包裹在一个匿名函数中,这个匿名函数再作为另一个匿名函数的参数被传入,形参fact ...
JQuery 源码解析资料
2019独角兽企业重金招聘Python工程师标准>>> jQuery源码分析系列目录 jQuery源码解读-理解架构 jQuery源码解析(架构与依赖模块) jQuery v1.10 ...
关于JQuery源码解析
源码分析-----整体架构 1.首先关于jQuery的闭包结构 (function(window,undefined){//jquery代码jquery=function(selector,conte ...
jquery源码解析：代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
jQuery 源码解析一：jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
【深入浅出jQuery】源码浅析--整体架构（转）
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理
前言这是学习源码整体架构系列第七篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 学习源码整体 ...

JQuery源码解析-整体架构的设计

JQuery源码解析-整体架构的设计相关推荐

最新文章

热门文章