JQ source code analysis (environment)

Where can JQ run

Browser mobile app (with window environment, does not support commonJS specification, supports es6 module specification)

node environment (no window supports commonJS but not Es6Module)

Can be compiled with webpack

Support window and commonJS specification, support Es6Module specification (Es6Module and commonJS can be combined) package and compile based on node, and the packaged result is handed over to the browser for rendering

Source code analysis

// Self-executing function to protect variables from global pollution(function (global, factory) {/*global:window(browser webpack)/global(this)factory: callback function*/'use strict'//The current running environment supports the Commonjs specification (node&&webpack)if (typeof module === "object" && typeof module.exports === "object") {// Export in webpack environment// module.exports=factory(window,true)//node environment (jq is not supported)// module.exports=function(w){....}// When using let $=require('jquery')-->$()-->Errormodule.exports = global.document ?factory(global, true) :function (w) {// There is no document in the node environment and an error is reported directlyif (!w.document) {throw new Error("jQuery requires a window with a document");}return factory(w);};} else {// currently does not support commonJS specification (browser environment)factory(global);}})(typeof window !== 'undefined' ? window : this,function (window, noGlobal) {'use strict'//Import jq in the browser environment window->window onGlobal->undefined//window--"window onGlobal--"true in the webpack environment, export the return result of the factory execution module.exportsvar version = "3.6.0",jQuery = function (selector, context) {};// expose the api// Support the AMD module idea in the current environment and import jquire.main.js. At this time, we use the AMD idea to define the jq module// use pre-import require(['jquery'],function($){$()})if (typeof define === "function" && define.amd) {define("jquery", [], function () {return jQuery;});}// Execute in the browser Mount jQuery globally in the window using $() or jQuery()if (typeof noGlobal === "undefined") {window.jQuery = window.$ = jQuery;}// Export jquery module.export=jquery in webpack environment// use const $=rquire('jquery')--->$()return jQuery})

Imitate the environment to distinguish

(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}// expose the apiif (typeof define === "function" && define.amd) {define("utils", [], function () {return utils;});}if (typeof noGlobal === "undefined") { window.utils = utils }return utils})

Simple writing

 (function () {'use strict'let utils = {version: "1.0.0"}// expose the apiif (typeof module === "object" && typeof module.exports === "object") module.exports = utilsif (typeof window !== 'undefined') window.utils = utils})()