jQuery源码解析(架构与依赖模块)一、理解架构

一、设计原理

轻量级的js库，兼容CSS3，兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），Jquery2.0及后续潘奔不在支持IE6/7/8浏览器。jQuery一个比较大的优势是，它的文档说明很全，并且各种应用很详细，同时还有许多成熟的插件提供。核心：The Write Less，Do More（写更少，做更多）。简洁的API、优雅的链式、强大的查询与便捷的操作，使的jQuery成为前端世界的一把利剑！

二、整体架构

13个核心方法
// 核心方法
// 回调系统
// 异步队列
// 数据缓存
// 队列操作
// 选择器引
// 属性操作
// 节点遍历
// 文档处理
// 样式操作
// 属性操作
// 事件体系
// AJAX交互
// 动画引擎
五大模块：
选择器、DOM操作、事件、AJAX与动画

三、立即调用表达式

任何库和框架设计第一要点就是解决命名空间与变量污染的问题，jQuery利用了JS函数作用于的特性，采用‘立即调用表达式’包裹了自身的方法来解决这个问题。

写法1.

(function (window,factory) {factory(window);}(this,function () {return function () {//jQuery的调用alert(12);}}));

形参 window和factory，实参this、函数，factory（window）中的window为一个实参，this代表window
上面的代码代码代码中嵌套了两个函数，把其中的一个函数作为参数传递到另一个函数中，并且执行，我们可以简化一下写法：如下

写法2.

var factory = function () {return function () {//执行方法alert(12);}};var jQuery = factory(); //此时表达的是返回的函数

上面的代码效果和方法一是等同的，但是却有点变成了简单的工厂方法模式，需要自己去调用，下面我们再次改进：

写法3.

(function (window,undefined) {var jQuery = function () {}// ...window.jQuery = window.$ = jQuery;$();})(window);

四、jQuery的类数组对象结构

为什么jQuery能像数组一样操作，为什么能通过对象get方法或则直接通过下标0索引就能转化成DOM对象
jQuery的入口统一是$，通过传递参数的不通，实现9种方法的重载，

1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)
分为三大块：选择器、dom的处理、dom加载，换句话说，jQuery就是为了获取DOM、操作DOM，
所有，为了更方便这些操作，让节点与实例对象通过一个桥梁给关联起来，jq内部采用一种叫‘类数组对象’的方式作为存储结构，即可以像对象一样处理jq对象，也能像数组一样可以使用push、pop、shift、unshift、sort、map等类数组的方法操作jq对象。

举个栗子 ：

var aQuery = function(selector) {    //强制为对象if (!(this instanceof aQuery)) {return new aQuery(selector);}var elem = document.getElementById(/[^#].*/.exec(selector)[0]);this.length = 1;this[0] = elem;this.context = document;this.selector = selector;this.get = function(num) {return this[num];}return this;}

 1、强制为对象，第一次执行时，通过instanceof判断原型是否是aQuery，第一次显然不是，并通过new创建一个新的aQuery对象。

 2、正则中的^代表的是以什么开头，[]代表包含的内容，[^]则代表不包含的内容。返回的是除了#之外的内容，因为是数组，所有要使用[0]来获取。

五、jQuery中的ready与load事件

jQuery中三种文档的加载方式 ：

1.

$(document).ready(function () {// body...});

2.方式1的简写

$(function () {// body...});

3.

// $(window).load(function () {// // body...// });   //如果不支持此方法的使用，则需要在window中添加事件监听来实现

大家在面试的时候，经常被问到一个问题，ready和load哪一个先执行，答案是ready先执行，load后执行。下面看一下DOM文档的加载步骤 ：

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready 、DOMContentLoaded
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

由上可以看出，两者的区别是资源文件的加载，ready构建基本的DOM结构，一般使用ready，这样网站页面加载速度更快，而load需要加载完图片等资源才去处理框架的加载。

// jquery文档加载时机jQuery.ready.promise = function (obj) {if(!readyList){readyList = jQuery.Deferred();//表示页面已经加载完成，直接调用 ready方法if (document.readyState === "complete") {//将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒）setTimeout(jQuery.ready);}else{ //监听DOM加载完成document.addEventListener("DOMContentLoaded",complete,false);//这里是为了确保所有ready执行结束，如果DOMContentLoaded方法执行了，将有一个状态值 isReady被设置为true,因此， //ready方法一旦执行，那么将只执行一次，window.addEventListener中的ready 将被 return 中断window.addEventListener("load",complete,false)}}return readyList.promise(obj);}

六、jQuery多库共存处理

多库共存换句话可以叫‘无冲突处理’，主要由于jQuery采用$作为命名空间，不免会与别的框架或插件产生冲突，jQuery给出一个方案--noConflict函数，此函数将$符号的控制权让给其他的库，而使用jQuery来代替$符号
比如：$('name') 换成jQuery('name')

var _jQuery = window.jQuery,    _$ = window.$;jQuery.noConflict = function(){if( window.$ === jQuery){window.$ = _$;}if(deep && window.jQuery === jQuery){window.jQuery = _jQuery;}return jQuery;}

//上面的函数必须在导入jQuery文件之后，并且需要有相同$作为命名空间的库。
//首先将外部的window.$赋予_$,在noConflict中进行判断，如果没有交出控制权则将window.$与之前保存的_$替换。

本文参考资料为 ： http://www.imooc.com/code/3093