In the final exported dist file, the outermost layer is the self-executing function execution, and the two IIFE parameters, global and Factory, are used to distinguish the environment. Jquery import is equivalent to self-executing function execution, which mounts all the internal content to one of the window properties, forming a closure space where the user can access what jquery exposes via window.$

Basic skeleton

Monitoring of the environment

/** * Check environment: use temporary dead zone * If there is no window in the current environment, Typeof check will not report error, return undefined. * If there is no window (node environment), global = this * If there is window (browser, webview, webpack environment), global = window */
    let params1 = typeof window! = ='undefined' ? window : this



/** ** commonJS webpack environment: window = window, noGlobal = true */
    let params2 = function (window, noGlobal) {... }/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = environment to distinguish the = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/** * the jquery environment is distinct * using strict mode */
    (function (global, factory){
      "use strict"
      /** * && Checks whether the current environment supports the CommonJS specification, also using temporary dead zones * if supported: node or Webpack * if not: browser/WebView */
          if( typeof module= = ="object" && typeof module.exports === "object") {/** * Supports the commonJS specification */
                module.exports = global.document ? 
                    // Global is a webpack environment
                    factory(global.true) : 
                    // No document, node environment, export proxy function
                    // If no window is present, the function must receive a window and execute normally
                    // A pure Node environment does not support jquery (node does not need to manipulate DOM)
                    function (w){
                      if ( !w.document ) {
                          throw new Error( "jQuery requires a window with a document" );
                        }
                        returnfactory( w ); }}else {
            /** * Not supported by the commonJS specification * browser environment, WebView environment * &&& params2 callback function execution */
                factory( global )
          }
    })(params1, params2)
Copy the code

Conclusion:

When writing your own plug-in/component, you need to make the component support SCRIPT import, commonJS/ES6Module, you can use the above way to separate. Or refactoring in some of the older libraries to add a layer of environmental compatibility.

(function (){
    function xxx(){}; .// Check the window environment
    if(typeof window! = =undefined) {
        window.xxx = xxx;
    }
    // Determine the commonJS specification
    if(typeof module= = ='object' && typeof module.exports === 'object') {
        module.exports = xxx;
    }
})()
Copy the code

JQ mount

/ / the main function
let params2 = function(window, noGlobal){
    // Some operations./** * declare the jQuery function */
      var jQuery = function (selector, context) {}
   // Some operations./ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = how library coexist = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
 /** * Resolve global attribute names jQuery and $naming conflicts with other libraries * eg: Zepto globally exposes $, jQuery globally exposes $, $*  *  * var _jQuery, _$ Save window.jQuery(= undefined) --> * and window.$(= undefined) * noConflict * Let jq = $.noconflict (), jq = jquery, $-->Zepto */
        var
        // If there is a conflict between different versions of jquery, the _jquery obtained is no longer equal to undefined, but the previous version of jquery introduced
        _jQuery = window.jQuery,
        _$ = window. $;// The noConflict function is exposed to the user to resolve naming conflicts on the window
        jQuery.noConflict = function( deep ) {
          if ( window.$ === jQuery ) {
            // Call the noConflict method, jQuery must have occupied $and return $to someone else's $
            // _$stores the contents of the overwritten $store
            // The last method returns jquery, which can be referenced by the user in other variables
            window. $= _ $; }// When a product imports different versions of jquery, not only $conflicts, but jquery also conflicts
          The deep parameter controls whether to transfer the name of an existing version of jQuery in case of a version conflict
          if ( deep && window.jQuery === jQuery ) {
            // return as above,
            window.jQuery = _jQuery;
          }
          // Create your own alias to represent jquery when resolving conflicts. Let jq = $.noconflict ().
          return jQuery;
        };


/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = mount = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
   /** * Mount JQ to the browser environment using */
      if ( typeof noGlobal === "undefined" ) {
         window.jQuery = window.$ = jQuery;
      }
      
   /** * amd environment uses */
     if ( typeof define === "function" && define.amd ) {
         define( "jquery"[],function() {
             return jQuery;
         });
    }      
    
   /** * & Mount JQ to commonJS using * module.exports = global.document? factory(global, true) : function (w) {... Js module.exports = factory(global, true) = jquery */
      return jQuery
}
Copy the code