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
})()