jQuery源码导航

最新推荐文章于 2021-03-12 21:47:24 发布

北冥jax

最新推荐文章于 2021-03-12 21:47:24 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： jQuery 源码

本文链接：https://blog.csdn.net/JaxHu/article/details/89963732

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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库和框架都必须具备的功能。