jQuery学习（零）

前言：

阅读完JavaScript设计模式的第一部分后，对封装有了进一步的认识，并且学习了单体模式，跟链式调用。尤其是链式调用这一章节，对先前一些不懂的地方开始有了一点思路，紧接着该部分，打算学习理解下jQuery的封装，研读下源码，理解下jQuery源码的厉害之处。

---

1. 观察jQuery的源码可以发现，所有的代码都是包括在一个自调用的匿名函数中，这个匿名函数有两个参数，global跟factory。其中global为全局对象，factory则是jQuery所有功能的生产者，jQuery的所有函数，功能均在这里面去做具体实现。

2. 下面我们可以看下这个自调用，立即执行的匿名函数中做了些什么？

( 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.
        //对于像commonJs或者类似commonJs的环境中的话，因为的确存在'window'，所以就会执行factory方法并且获取到jQuery对象。
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        //对于像node.js这样的代码环境中没有'document'的'window'对象的，会将factory方法像module.export的形式导出。
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        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 ) {

通过对module跟module.export进行类型判断，可以检测出是否存在类似commonJS模块化的环境中，但不存在模块化的环境中是直接执行factory方法，并且将global对象传入factory方法中。
我的理解是像我们常规的web开发的时候，如果不涉及到模块化，我们会直接在script上面引入jQuery，这个时候就是执行了else语句里面的，因为检测不到module的存在。
如果我们使用了commonJs的情况下，要引入jQuery，我们应该会这样做，var jQuery = require("jquery")(window)，我们会用到require的形式去引入jQuery，这时候就会检测到module的存在。
然后会进行判断global对象里是否存在document对象，如果存在则调用factory方法，不过此处有两个参数，这里不一样的地方是，这个第二个参数传入了true。第二个参数的作用，后面一点再说。
如果不存在document对象，那就说明我们的代码可能不在浏览器的执行环境中，这时候返回的是匿名函数，这个匿名函数只有一个参数，这个参数是让我们手动去传入存在document的window的对象。
如果传入的值内部不存在document对象，则会抛出异常。如果存在则将我们传入的对象去执行factory方法。这里我们就可以发现require("jquery")(window)的写法就是进行手动指定window对象。
对于上面的写法，我会在之后用commonJs跟AMD，es6的import还有node分别去验证，确认下自己的理解是否正确。

这个匿名函数实际上传入的两个参数为： typeof window !== "undefined" ? window : this, function( window, noGlobal ) {...}。第一个参数是先进行一次三元运算，判断window是否存在，如果存在则传入window，如果不存在则传入this。这个判断的作用感觉就是确认是否在浏览器的运行环境内，因为只有浏览器才存在window对象。第二个参数则是我们前面所讲的factory方法，这就是jQuery功能的具体实现方法，jQuery的巧妙之处也在这里面。也是我们着重要学习的地方。

---

补充：

经过验证得知：

1. jQuery以script的形式引入的情况下，是不存在module的，所以会直接执行factory方法，然后传入的第一个参数因为存在window对象，所以传入window。
2. 如果使用es6的import引入的话，存在window对象，module为object类型，但是module.exports为undefined。
3. 使用require引入，结果与import一致。