/*
* 闭包进阶之:单例设计模式 & 模块化编程思想
* 模块化编程历史「当代前端开发,都是模块化编程:公用性&复用性、提高开发效率、方便管理、团队协作开发...」
* @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);
jQ源码部分解读
最新推荐文章于 2021-09-27 16:34:23 发布