Jquery源码分析（一）-CSDN博客

本文深入剖析了jQuery JavaScript库v3.2.1版本的核心架构，揭示了一个庞大的自执行匿名函数如何通过精妙的设计实现其强大的功能。文章指出，整个jQuery源码实际上是由一个带有两个参数（global和factory）的自执行匿名函数构成，并详细解释了这一结构如何帮助jQuery兼容不同的运行环境。

版本： jQuery JavaScript Library v3.2.1

分析架构：

打开jquery.js，哇塞，一万多行，噩梦啊！很多人就say bye-bye了。其实，将代码结构拆分后，再分析源代码就简单多了。

( function( global, factory ) {
    "use strict";
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        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 );
    }
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    // 此处省略一万多行代码
} );

其实，整个jquery.js代码就是一个自执行的匿名函数，将自执行函数的函数体省略：

( function( global, factory ) {
    "use strict";
 } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    // 此处省略一万多行代码
} );

这样就可以看出jquery.js，就是一个有两个形参（ global、factory ）的自执行的匿名函数。当匿名函数执行时，传入的两个实参：

　typeof window !== "undefined" ? window : this

　和

　function ( window, noGlobal ){
  　　//此处省略一万多行代码 　
  }

也就是说：形参global的值是：typeof window !== "undefined" ? window : this ；而形参factory的值又是一个匿名函数，这个匿名函数中省略的一万多行代码就是jquery实现各种功能的函数。

　　if ( typeof module === "object" && typeof module.exports === "object" ) {

        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 );
    }

这段代码是为了兼容Node.js 和 CommonJS的。如何没有Node.js和CommonJS，就直接执行 factory( global );这段代码的主要功能就是：导入那省略的一万多行功能代码。

转载于:https://www.cnblogs.com/ymwangel/p/8290137.html