This is the 17th day of my participation in Gwen Challenge

CommonJS

  • CommonJS is loaded synchronously, mainly between applications and servers, and does not execute functions immediately after loading

use

var moduleB = require('./moduleB');// Import to use
// moduleB.js
module.exports = { // Export the module
	stuff: moduleB.doStuff();
};
Copy the code

  • If the same module is imported into a file several times, it will be loaded once, and then it will be cached. When it is imported again, the cache will be read. Since it is synchronized, the loading order is related to the import order

  • Exports =module.exports, exports=module.exports, exports=module

module.exports={
    name:'tom'
}
/ / is equivalent to
exports.name ='tom'
// This is wrong
exports= {}Copy the code
  • CommonJS module loads can be nested in conditional statements, and dependencies will be loaded when conditions are met, following the rule of only loading once, even if previously loaded
if (loadCondition) {
    require('./moduleA');
}
Copy the code

AMDJS

  • AMDJS are loaded asynchronously, applied to client browsers, and modules that depend on them are executed immediately after loading

use

  • When defining a module, THE dependencies AMD needs to execute, and specify a unique identity for the module
// Define a moduleA, which depends on moduleB
define('moduleA'['moduleB'].function(moduleB) {
    return {
        stuff: moduleB.doStuff();
    };
});

Copy the code
  • When AMD defines modules, it can use CommonJS modules internally, or it can make conditional judgments
define('moduleA'['require'.'exports'].function(require.exports) {
    if(true) {var moduleB = require('moduleB');
        exports.stuff = moduleB.doStuff(); }});Copy the code
// Execute callback() after successful introduction
require(['moduleA'].function(moduleA){
    moduleA.stuff()
})
Copy the code

UMDJS

  • In order to unify CommonJS and AMD, a UMD is created that can be used by both specifications. The UMD defines modules that are used to detect which module is used to load the specification
(function (root, factory) {
    if (typeof define === 'function' && define.amd) { / / AMD. Register as an anonymous module
        define(['moduleB'], factory);
    } else if (typeof module= = ='object' && module.exports) { // Use in CommonJS environment
        module.exports = factory(require(' moduleB '));
    } else { // Browser global context (root is window)
        root.returnExports = factory(root. moduleB);
    }
}(this.function (moduleB) {
    // Use moduleB in some way
    // Export the return value as the module
    // This example returns an object
    // But modules can also return functions as exported values
    return {};
}));
Copy the code

ES6 modular

  • ES6 modules are executed only after loading
  • Modules are loaded only once
  • You can continue loading other modules in a module
  • Asynchronous loading

use

  • Export modules are similar to CommonJS and can have more than oneexport

//moduleA.js
export const name ='tom'
export const age =12
/ / is equivalent to
export {name,age}


// Specify a specific name when referencing other files
import {name,age} from 'moduleA.js'

Copy the code
  • But there can only be oneexport defaultOtherwise, an error will be reported
//moduleB.js
export default{
	name:'tom'.age:12
}
// You can customize the imported identity name when other files are imported
import person from  './moduleB'
Copy the code

as

  • asYou can rename imported or exported variables
const foo = 'foo', bar = 'bar', baz = 'baz';
export { foo, bar, baz }
import * as Foo from './foo.js';// Rename the exported collection
console.log(Foo.foo); // foo
Copy the code
import { foo, bar, baz as myBaz } from './foo.js';  // Rename baz

console.log(myBaz); // baz  
Copy the code
  • For tag import, add in tagtype='module'To indicate that she is a module, in the page rendering, encounter this module, will directly load the JS module, will not block the page parsing, when the page parsing is completed in accordance with the order of execution
<! -- Second execution -->
<script type="module"></script>
<! -- Third execution -->
<script type="module"></script>
<! -- first execution -->
<script></script>Alternatively, you can load an external JS module definition instead:<! -- Second execution -->
<script type="module" src="module.js"></script>
<! -- Third execution -->
<script type="module" src="module.js"></script>
<! -- first execution -->
<script><script>
Copy the code