菜鸡看jQurey源码（1）

听说读jquery源码能提升js水平,本着好学态度来读一读源码。先挖一个坑,随时弃坑跑路。

整体结构

 jquery整体来看是用一个自执行的匿名函数把一个jQuery的构造函数绑定到全局变量window上。

(function(global,factory){})(window,jqueryFactory)

这里的function需要的global和factory两个参数来自于自执行函数后面括号里传的值，这里可以看到传入的是window和jqueryFactory。这个function里面做了什么事呢？

(function(global,factory){

    "use strict";

    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.

        //这里是源码给的注释，我大致翻译下
        //CommonJS和类CommonJS的环境有一个window，所以直接执行factory拿到jQuery。
        //像Node.js这种没有window和document的环境就用modelu.exports把factory暴露出去。


        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 );
    }
})(window,jqueryFactory)

具体实现

传递给上面函数的参数有两个，global和factory。

( function( global, factory ) {
...//省略上面提到的代码
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
....//省略中间代码,jquery内容全部写在这个里面
})

可以看的出来传给global的值是一个三元表达式，判断window在不在，不存在就手动传入window，存在就传入this。

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

jQuery的所有重点就是在传入的这个factory。下回有空，再深入这个函数内部看看实现方法。