jQuery2.1.1源码整体架构

一、整体架构

jQuery一共13个模块，从2.1版开始jQuery支持通过AMD模块划分，jQuery在最开始发布的1.0版本是很简单的，只有CSS选择符、事件处理和AJAX交互3大块，所以源码学习很重要，浏览器兼容、各种属性的获取、逻辑流程、性能等都可以在学习源码的过程中体会到。 

从这个架构图里面可可以清晰的看出jquery内部是如何工作的， 整体架构一目了然。

二、 代码开始如何进行整体架构

首先是jquery代码的开始

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

这里首先用了“JS高级程序中”关于第7章，模仿块级作用域的知识，js中是没有块级作用域的这和其它面向对象的语言有很大区别。而这里为了不污染全局变量采用了这种写 法，而且这个函数是自执行的。undefined 并不是作为关键字，因此可以允许用户对其赋值。同时这里也用了立即调用表达式 上面的代码等同于

var factory = function(){return function(){
    //执行方法}}var jQuery = factory();

看到这里会发现 JQuery中有很多类似的东西：

$(document).ready(function() {// ...代码...})//document ready 简写$(function() {// ...代码...})$(document).load(function() {// ...代码...})。

这些都是加载文档的方式，需要记住的是ready先执行，load后执行。 在源码中还会经常出现：

jQuery.extends()jQuery.fn.extends()jQuery.extend = jQuery.fn.extend

分别扩展jquery 以及jquery 原型 类似面向对象语言里面的类方法和实例方法

还会出现：

jQuery.prototype = jQuery.fn jQuery.fn.init.prototype 
return jQuery.fn.init

这些都是方便jquery直接创建实例。

jquery对象是可以像数组一样被操作的，下面是常用调用的方式，他们都可以被当做数组或对象操作

. jQuery([selector,[context]]). jQuery(element). jQuery(elementArray). jQuery(object). jQuery(jQuery object). jQuery(html,[ownerDocument]). jQuery(html,[attributes]). jQuery(). jQuery(callback)

为什么可以这样操作，因为在jquery内部通过一种叫做类数组对象的方式存储数据,既可以当做数组操作也可以当做对象处理。

原文链接：http://outofmemory.cn/javascript/jquery-source-architecture