200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > JQuery源码解析-整体架构的设计

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

时间:2023-01-19 21:05:59

相关推荐

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对象的原型。这样就实现了这种调用方式。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。