jquery源码分析(二)——架构设计_H5之家 - 中国HTML5教程资源分享第一站

正文

要学习一个库首先的理清它整体架构：

1、jQuery源码大致架构如下：(基于 jQuery 1.11 版本，共计8829行源码)
(21,94) 定义了一些变量和函数jQuery=function(){}
(96,280) 给jQuery添加一些方法和属性，jQuery.fn=jQuery.prototype
(285,347) extend: jQuery的一些继承方法更容易进行后续的扩展
(349,817) jQuery.extend()：扩展一些工具方法
(877,2856) Sizzle:复杂选择器的实现
(2880,3042) Callbacks:回调对象——》对函数的统一管理
(3043,3183) Deferred:延迟对象——》对异步的统一管理
(3184,3295) support:功能检测
(3308,3652) data():数据缓存
(3653,3797) queue():队列管理
(3083,4299) 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:位置与尺寸的方法
(8826) 对外提供jQuery对象接口：window.jQuery=window.$=jQuery;

贴出一位大牛司徒正美对jquery的剖析：（最近也在读他框架设计一书，深深折服，这里推荐下）

jQuery强在它专注于DOM操作的思路一开始就是对的，以后就是不断在兼容性，性能上进行改进。

ajax 数据交互 attributes 属性操作，共分className, 表单元素的value值，属性与特征四大块。 callbacks 函数列队 core 种子模块，命名空间，链式结构，domReady，多库共存。 css 样式操作，引入DE大神的两个伟大的hacks，基本上解决精确获取样式的问题。 data 数据存取。 deferred 异步列队（三合一版的函数列队） dimensions 元素尺寸的设置读取（来自社区）。 effects 动画引擎 event 事件系统（基于DE大神的事件系统与社区的两个插件） exports AMD系统(被RequireJS作者说服加几行代码支持其东东) manipulation 节点的操作 offset 元素offsetTop(Left)的设置读取 queue 列队模块（deferred与data的合体）。 sizzle 从右到左进行解析的选择器引擎。 support 特征侦测 traversing 元素遍历。

2、使用jQuery时，我们经常会在原生DOM对象和jQuery对象之间产生困扰，为什么DOM对象没有这个方法，jQuery实例对象可以轻松实现某些功能。接下来看看jQuery实例对象是怎么创建。

从这段代码可以看出：

(1)、 jQuery对象不是通过newjQuery创建的，而是通过newjQuery.fn.init创建的。

(2)、jQuery对象就是jQuery.fn.init对象（new jQuery.fn.init( selector, context, rootjQuery );）

(3)、jQuery.fn指向了jquery的原型（实际上是用属性名fn代替prototype，为后面编程使用方便，要不然多次使用prototype会很绕）：

jquery 原型定义了jquery对象初始化init的一系列方法。

(4)、接下来，定义在jQuery.fn.init，后面又加上这句init.prototype = jQuery.fn ：即jQuery.fn.init的原型也指向了jQuery的原型，有点绕哈，合并下：

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype，实例说明一下，

这说明了我们使用new jQuery.fn.init()创建的实例对象的原型就是jQuery的原型，这样你就可以在jquery实例对象就可以直接调用jQuery这个类原型上挂载的方法了。

(5)、检验一个库的好坏是看这个库的扩展性和兼容性。jQuery.extend = jQuery.fn.extend = function() {}是jQuery对外提供扩展的方法

jQuery之所以如此强大，就是它能很容易实现类方法（虽然javascript没有类的概念，但这里还是用类来理解下，希望不要误解到读者）和实例方法扩展。

下面分析下jQuery实例对象这么创建的。

init = jQuery.fn.init = function( selector, context ) { var match, elem; ( !selector ) { return this; } ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } ( match && (match[1] || !context) ) { ( match[1] ) { context = context instanceof jQuery ? context[0] : context; jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); } } } return this; // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); ( elem && elem.parentNode ) { ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } .length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); } else { return this.constructor( context ).find( selector ); } // HANDLE: $(DOMElement) } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); };

分析上面代码：

1、jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后创建jQuery实例对象。