jquery总体架构

最新推荐文章于 2025-11-25 00:02:01 发布

原创最新推荐文章于 2025-11-25 00:02:01 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery源码解析 #jquery总体架构

jquery源码解析专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了jQuery的模块化加载方式及环境判断逻辑。通过一个自执行函数实现，能够根据运行环境（如浏览器或Node.js）的不同进行适应性加载，并支持模块化编程。文章深入探讨了jQuery如何在不同环境下初始化并设置全局变量。

( 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 ) {
        .... 
    if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
    }
    return jQuery;
} );

它是一个自执行的函数，当引入jquery的时候它就会自动执行，并做一个初始化工作，

 typeof window !== "undefined" ? window : this //  这是用来判断当前执行环境，（浏览器、node）

 if ( typeof module === "object" && typeof module.exports === "object" ) //  这是判断当前环境是否支持模块化，模块化时jquery、$就不在是全局变量

if ( !noGlobal ) {        noGlobal 表示jquery是否要设置为  局部变量
        window.jQuery = window.$ = jQuery;      //  根据需要把jquery、$设置为全局变量
    }

PS: 引入jquery.js时候就初始化$,并根据需要添加到全局变量，当使用模块化编程时需注意它的作用域