1-环境区分
var global = typeof window !== "undefined" ? window : this;
// 如果global===window:说明是浏览器、webview中运行
// 如果是在Node环境下运行,global可能是Global,也可能是当前模块
var factory = function (window, noGlobal) {
// 浏览器环境下执行这个函数
// window -> window
// noGlobal -> undefined
// webpack环境下导入执行
// window -> window
// noGlobal -> true
"use strict";
var version = "3.5.1",
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);
};
// ...
if (typeof noGlobal === "undefined") {
// 浏览器直接导入
window.jQuery = window.$ = jQuery;
}
return jQuery;
};
(function (global, factory) {
"use strict";
if (typeof module === "object" && typeof module.exports === "object") {
// module & module.exports CommonJS模块规范「Node」
module.exports = global.document ?
// 即支持CommonJS规范,也有window 例如:webpack工程化环境
// =>module.exports=jQuery;
//+ import $ from 'jquery' $->jQuery
//+ let $=require('jquery') $->jQuery
factory(global, true) :
function (w) {
if (!w.document) {
throw new Error("jQuery requires a window with a document");
}
return factory(w);
};
} else {
// 不支持CommonJS规范的「浏览器环境」
// global->window
// <script src='jquery.min.js'></script>
factory(global);
}
})(global, factory);
2-权限转让
function factory(window, noGlobal) {
"use strict";
var 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 */
if (typeof define === "function" && define.amd) {
define("jquery", [], function () {
return jQuery;
});
}
if (typeof noGlobal === "undefined") {
window.jQuery = window.$ = jQuery;
}
return jQuery;
}