• 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 );这段代码的主要功能就是:导入那省略的一万多行功能代码。

  • 相关阅读:
    如何拯救任务栏
    VMware 11 安装 OS X 10.10 虚拟机
    控制台绘制正切曲线
    控制台绘制正弦曲线和余弦曲线同时显示
    控制台绘制正弦/余弦曲线
    一文看懂js中的clientX,clientY,pageX,pageY,screenX,screenY
    一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)
    一文看懂js中元素的客户区大小(clientWidth,clientHeight)
    一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)
    从头认识js-DOM1
  • 原文地址:https://www.cnblogs.com/ymwangel/p/8290137.html
Copyright © 2020-2023  润新知