菜鸡看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。下回有空，再深入这个函数内部看看实现方法。