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的自调用匿名函数。欢迎交流，若有不足指出，请指正，万分感谢。