jQuery源码框架导航

jQuery的适用面非常的广，用了很久，现在突然想提笔记录一下研读JQuery源码的过程。写文章的时候去jQuery官网查看了一下，最新的jQuery版本是3.4.1，本次解析选择了3.3.1版本进行学习记录，虽然小版本会有一些差异，但是大体的框架和实现的功能都差不多，代码所在的位置也大致相同。

write less,do more

本文会依据《jQuery技术内幕：深入解析jQuery架构设计与实现原理》一书的解析流程模式进行相应的学习过程记录。

总体架构

jQuery的模块分为三部分：

入口模块
底层支持模块
功能模块

入口模块

入口模块的功能比较简单–构造jQuery对象。

底层支持模块

此模块是支持整个jQuery框架完美运行的一些底层方法。

工具方法 - Utilities
回调函数列表 - Callbacks
异步队列 - Defferred
浏览器功能调试 - Support
数据缓存 - Data
队列 - Queue
选择器 - Sizzle

功能模块

此模块包含一些开发者常用的DOM操作，事件系统，动画等常用功能。

属性操作 - Attributes
事件系统 - Events
DOM遍历 - Traversing
样式操作 - CSS
异步请求 - Ajax
动画 - Effects

jQuery的自调用匿名函数

下面是jQuery的起点，首先分析一下这段代码的作用和结构。

(function( global, factory ) {if ( typeof module === "object" && typeof module.exports === "object" ) {// For CommonJS and CommonJS-like environments where a proper `window`// is present, execute the factory and get jQuery.// For environments that do not have a `window` with a `document`// (such as Node.js), expose a factory as module.exports.// This accentuates the need for the creation of a real `window`.// e.g. var jQuery = require("jquery")(window);// See ticket #14549 for more info.module.exports = global.document ?factory( global, true ) :function( w ) {if ( !w.document ) {throw new Error( "jQuery requires a window with a document" );}return factory( w );};} else {factory( global );}
// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { //这里包括后面的一万多行JQ代码
}));

我们可以将上面这个匿名函数简化为

(function( global, factory ) {.....
}(arg1,arg2));

arg1是 “typeof window !== “undefined” ? window : this”
arg2是 “function(window,noGlobal){}”
形参global对应着实参arg1，形参factory对应着实参arg2。
第一个arg1代表的三目元算符用于判断当前执行环境是否支持window对象。
第二个arg2则是一个函数，包含着一万多行jQuery的功能函数和底层支持函数。
弄清楚了这个匿名函数外层两个参数的含义和作用，我们就再看看内部这段代码的作用是什么。

 if ( typeof module === "object" && typeof module.exports === "object" ) {//这个if里面的一段代码是为了兼容符合CommonJS规范的一些框架例如node.js等module.exports = global.document ?factory( global, true ) :function( w ) {if ( !w.document ) {throw new Error( "jQuery requires a window with a document" );}return factory( w );};} else {//当然，如果没有用类似框架//就可以直接返回当时的arg2也就是包含整个jQuery功能的函数并且传入arg1，//在这里就是如下展现形式factory( global );}

jQuery为什么要使用自调用匿名函数

在上面我们弄清楚了结构，现在来说说这么写的优势是什么。
jQuery 是一个很火爆的工具库，被成千上万的开发者引用，会出现在各种程序环境中。那么确保jQuery的代码不受其他代码的干扰，或者不去干扰其他代码，这个匿名函数所带来的私有函数作用域就可以阻止代码冲突的问题。这也是任何一个JavaScript库和框架都必须具备的功能。

 window.jQuery = window.$ = jQuery;

在jQuery库的末尾有以上这么一句话，手动将“jQuery”变量添加在window对象上，明确的使用变量“jQuery”成为公开的全局变量，而其内部的arg2代表的函数部分全部都是私有的。

总结

此文借助《jQuery技术内幕》和自己的研读分析，前半部分粗略的给想学习jQuery源码的朋友们进行一个树立。而后半部分，则分析了jQuery的自调用匿名函数。欢迎交流，如有不足指出，请指正，万分感谢。

jQuery源码导航相关推荐

jQuery源码学习之Callbacks
jQuery源码学习之Callbacks jQuery的ajax.deferred通过回调实现异步,其实现核心是Callbacks. 使用方法使用首先要先新建一个实例对象.创建时可以传入参数flag ...
js便签笔记（9）——解读jquery源码时记录的一些知识点
近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...
jQuery源码学习（1）——addClass
最近比较闲,寻思着学习下jQuery源码,看了好多博客,很多都讲的比较详细.jQuery虽然只有那么200多K,但内容却比较丰富,对于我这样一个js菜鸟,看起来相当吃力.骨头太大,只能化整为零,从简单 ...
jquery源码学习笔记一：总体结构
练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...
Jquery源码分析-整体结构
最近在学习Jquery的最新的源码,Jquery-3.3.1版本.网上有很多对jquery解析的文章.但是我还是要自己去尝试着看一篇jquery的源码.本系列博客用来记录其中的过程,并同大家分享.本次 ...
jQuery 源码分析第一篇之入口源码
目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料.原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流,希 ...
jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...
【jQuery源码】整体架构
jQuery源码可以精简为以下内容: 方框上面的代码根据Jq注释我们可以知道是对AMD规范的支持. jQuery整体上被包裹在一个匿名函数中,这个匿名函数再作为另一个匿名函数的参数被传入,形参fact ...

jQuery源码导航