CommonJS

Node applications use the CommonJS module specification. Each file in Node is a module and has its own scope. Variables and functions defined in the module are private.

Modules have four important variables: global, Module, exports, require.

The global variable in Node is similar to the window object in the browser. Variables declared globally can be accessed in all modules. The module variable represents the current module, where the module.exports property represents the interface that the current module exports. When other files reference the module using require, they actually read the module.exports variable.

/ / module a. s
const num = 1
module.exports = {
    num,
    add: function(x,y){
        return x+y
    }
}
Copy the code
// module b.js, introducing A.js
const a = require('./a.js')
// {num:1, add:fn}
Copy the code

The exports variable is a reference to module.exports; Exports = module.exports var exports = module.exports var exports = module.exports

/ / module a. s
exports.num = 1
exports.add = function(x,y){
    return x+y
}
Copy the code

The CommonJS specification loads modules synchronously, and after the loading is complete, the following operations can be performed. The module also outputs a copy of the value, meaning that once a value is output, changes within the module do not affect that value.

AMD

AMD: Asynchronous Module Definition, which is the standard output of RequireJS in the promotion process. After require.js is loaded, the js in data-main is loaded through the callback method, then require.config method specifies the third-party resource path, define method defines the module written by itself, and finally the module is loaded using the require method

<! -- require. Js, main.js, require. Config -->
<script src="require.js" data-main="main.js"></script>

<! -- main.js -->
<script>
    require.config({
        paths: {
            "Vue": "./vue"."jquery": "./jquery"  // the js suffix is not written}})require(["Vue"."jquery"].function(vue,$){
        // The dependent module is passed as an argument to the callback function, so you can use Vue and jQuery normally
    })
</script>
Copy the code

The define method customizes the module without requiring a path in require.config

<! -- Own modules such as module_test.js -->
<script>
    define(function(a){
        function add(x,y){
            return x+y
        }
        return {
            add
        }
    })
</script>
<! -- If customization depends on other modules, import other modules first -->
<script>
    define(['jquery'].function($){
        function add(x,y){
            const total = x+y
            $('body').html(total)
            return total
        }
        return {
            add
        }
    })
</script>
Copy the code

CMD

CMD: Common Module Definition, is the standardized output of SeaJS Module Definition in the promotion process. This is similar to AMD syntax, except that WHILE AMD defines modules, it declares dependent modules, CMD loads modules only when they are needed. Both AMD and CMD have implemented front-end resource modules, which should be used less now that ES6 and Webpack tools have emerged.

ES6 Module

ES6 implements module functions on the level of language standards. The function of the module consists of two commands: export and import. The export command is used to specify the external interface of a module, and the import command is used to input functions provided by other modules. If you want to load ES6 modules directly from the browser, use

Refer to the loading implementation of Module

// m1.js defines the output
const a = 1
export default a
export const b = 2
export function add(x,y){
    return x+y
}

/ / m2. Js references
import a, {b, add} from './m2.js'
Copy the code

Two big differences between ES6 modules and CommonJS modules

  • CommonJS module outputs a copy of a value, ES6 module outputs a reference to a value.
  • 2, CommonJS module is run time load, ES6 module is compile time output interface. If the original value in the ES6 module changes, the import loaded value will also change. Therefore, ES6 modules are referenced dynamically and do not cache values. Variables in modules are bound to the module in which they are located.

UMD

UMD is a mashup of AMD and CommonJS. UMD determines whether the node. js module exports is supported, and then whether AMD defines exists. For example, open the vue.js file

(function (global, factory) {
  typeof exports === 'object' && typeof module! = ='undefined' ? 
    module.exports = factory() :
  // Whether node.js modules are supported
  typeof define === 'function' && define.amd ? 
    define(factory) :
  // Whether AMD is supported
  (global = global || self, global.Vue = factory());
  // Finally not mount in window.vue} (this.function () { 
    'use strict';
}))
Copy the code