jQ源码部分解读

/*
 * 闭包进阶之：单例设计模式 & 模块化编程思想
 *  模块化编程历史「当代前端开发，都是模块化编程：公用性&复用性、提高开发效率、方便管理、团队协作开发...」
 *    @1 高级单例设计模式「闭包+对象」  问题：根据模块之间的依赖，需要明确导入顺序
 *    @2 AMD  按需加载(require.js)  问题：所有的依赖都是需要提前导入的 “前置依赖”
 *    @3 CMD(sea.js) & CommonJS规范(Node.js)  问题：客户端浏览器不支持CommonJS规范（如果导入sea.js是可以支持的）；当代打包工具webpack是支持CommonJS规范的，最后按照CommonJS把各个模块进行打包，编译为浏览器可以支持的代码「webpack本身是基于node环境运行的，基于webpack打包后的代码，是webpack自己实现了一套CMD规范」！！
 *    @4 ES6Module模块规范   特点：webpack中也支持、浏览器中也可以直接支持
 * 
 *  扩充:JS代码可以在哪运行
 *    + 浏览器端  webkit(blink)、gecko、trident...
 *    + webview「手机端APP中」 webkit
 *   「有window，不支持CommonJS规范，支持ES6Module规范」
 *    -----
 *    + node环境「没有window、支持CommonJS规范、但是不支持ES6Module规范」
 *    -----
 *    + 可以基于webpack进行编译「支持window、也支持CommonJS规范、支持ES6Module规范（可以让ES6Module和CommonJS混合调用）...」：基于node环境进行打包处理，打包后的结果交给浏览器端去渲染和运行
 * 
 *  JQ部分源码阅读
 */

// 检测当前运行JS的环境是否支持window「Node环境下运行 g-->global/模块」
var g = typeof window !== "undefined" ? window : this;
var factory = function factory(window, noGlobal) {
    // webpack : window-->window   noGlobal-->true
    // 浏览器(webview): window-->window   noGlobal-->undefined
    "use strict";
    var version = "3.6.0",
        jQuery = function (selector, context) {
            return new jQuery.fn.init(selector, context);
        };
    // ......

    //=====================冲突处理
    // 场景
    //    <script src='zepto.js'></script>
    //        window.$=Zepto;
    //    <script src='jquery.js'></script>
    //        var _$=window.$;  // _$===Zepto
    //        jQuery.noConflict = function (deep) {}
    // 
    //        window.$=jQuery;
    // JQ抢了Zepto对$的使用权，此时需要转让使用权 let jj=$.noConflict()，后期 jj 代表的是就是JQ
    var _jQuery = window.jQuery,
        _$ = window.$;
    jQuery.noConflict = function (deep) {
        if (window.$ === jQuery) {
            window.$ = _$;
        }
        if (deep && window.jQuery === jQuery) {
            window.jQuery = _jQuery;
        }
        return jQuery;
    };

    //=====================导出API
    // 让其支持AMD模块规范
    if (typeof define === "function" && define.amd) {
        define("jquery", [], function () {
            return jQuery;
        });
    }
    // 如果直接在浏览器（webview）中基于 <script src='jquery.js'> 导入的JQ，我们在全局对象中暴露 “jQuery | $”
    if (typeof noGlobal === "undefined") {
        window.jQuery = window.$ = jQuery;
    }
    // 在webpack中运行，则基于module.exports=jQuery，让其支持CommonJS规范
    return jQuery;
};

(function (global, factory) {
    // 浏览器(webview & webpack):global-->window  
    // NODE环境:global-->global/模块
    "use strict";
    if (typeof module === "object" && typeof module.exports === "object") {
        // 当前环境支持CommonJS规范：NODE & webpack
        module.exports = global.document ?
            // global-->window  说明是运行在webpack环境中的
            factory(global, true) :
            // 说明在NODE环境下运行 “JQ不支持NODE环境下运行”
            function (w) {
                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }
                return factory(w);
            };
    } else {
        // 浏览器(webview)
        factory(global);
    }
})(g, factory);