JQ源码分析（环境处理）

JQ可以在哪运行

浏览器 手机端app中（有window环境，不支持commonJS规范，支持es6 module规范）

node环境（没有window 支持commonJS 但不支持Es6Module）

可以用webpack进行编译

支持window 也支持commonJS规范，支持Es6Module规范（可以让Es6Module和commonJS结合）基于node进行打包编译 打包后的结果交给浏览器进行渲染

源码解析

// 自执行函数 保护变量不受全局污染
(function (global, factory) {
    /*global:window(浏览器 webpack) / global(this) 
    factory:回调函数
    */
    'use strict'
    //当前运行的环境支持Commonjs规范(node&&webpack)
    if (typeof module === "object" && typeof module.exports === "object") {
        // webpack环境下导出
        //      module.exports=factory(window,true)
        //node 环境下（不支持jq）
        //    module.exports=function(w){....}
        //    使用的时候 let $=require('jquery')-->$()-->报错
        module.exports = global.document ?
            factory(global, true) :
            function (w) {
                // node环境下没有document 直接报错
                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }
                return factory(w);
            };
    } else {
        //当前不支持 commonJS规范 （浏览器环境）
        factory(global);
    }

})(
    typeof window !== 'undefined' ? window : this,
    function (window, noGlobal) {
        'use strict'
        //浏览器环境下导入jq window->window onGlobal->undefined
        //webpack环境下 window--》window onGlobal--》true，把factory 执行返回结果 module.exports导出

        var version = "3.6.0",
            jQuery = function (selector, context) {

            };

        // 暴露 api
        // 当前环境下支持AMD模块思想 导入了jquire.main.js.此时我们使用AMD思想定义jq模块
        // 使用 前置导入 require(['jquery'],function($){$()})
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () {
                return jQuery;
            });
        }

        // 浏览器中执行 在window全局挂载jQuery 使用$()或者jQuery()
        if (typeof noGlobal === "undefined") {
            window.jQuery = window.$ = jQuery;
        }
        // 在webpack环境下导出jquery module.export=jquery
        // 使用 const $=rquire('jquery')--->$()
        return jQuery
    }
)

仿照环境区分

(function (global, factory) {
    'use strict'
    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = factory(global, true)
    } else {
        factory(global)
    }
})(typeof window !== 'undefined' ? window : this, function (window, noGlobal) {
    'use strict'
    let version = "1.0.0",
        utils = {
            version
        }
    // 暴露api
    if (typeof define === "function" && define.amd) {
        define("utils", [], function () {
            return utils;
        });
    }
    if (typeof noGlobal === "undefined") { window.utils = utils }
    return utils
})

简便写法

    (function () {
        'use strict'
        let utils = {
            version: "1.0.0"
        }
        // 暴露api
        if (typeof module === "object" && typeof module.exports === "object") module.exports = utils
        if (typeof window !== 'undefined') window.utils = utils
    })()