Js modular import and export

Js modular import and export

CommonJs, AMD, CMD, ES6Are defined in specifications for modular use, for which the dependency between the processing module and the introduction of standardized modules and resolve naming conflicts, and to make use of a modular approach to decompose complex systems code structure is more reasonable , A manageable module with higher maintainability.

CommonJS

CommonJSIt is NodeJsthe specification of server-side modules. According to this specification, each file is a module with its own scope. Variables, functions, and classes defined in a file are private and invisible to other files. CommonJSThe specification stipulates that within each module, modulevariables represent the current module. This variable is an object, and its exportsattributes are external interfaces. Loading a module is actually loading the module exportsproperties. In short, the CommonJSspecifications are requireimported module.exportsand exportsexported.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

module.exports = {
    a: a,
    b: b
}

/*
// 当导出的模块名与被导出的成员或方法重名时可以有如下写法
module.exports = {
    a,
    b
}
*/

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

It can also be used exportsfor export, but you must not rewrite exportsthe pointer, because it exportsis only a pointer and points to module.exportsthe memory area, that is exports = module.exports = {}, rewriting exportschanges the pointer to the point that the module cannot be exported, which simply exportsprovides a simple solution for writing , In the end, in fact, all use module.exportsexport. Also if used simultaneously in one file module.exportsand exportsthen export only module.exportscontent

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

exports.a = a;
exports.b = b;

// exports = { a, b } // 不能这么写，这样就改变了exports的指向为一个新对象而不是module.exports

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

AMD

AMDThe specification is not AMD YES, the AMDdefinition of asynchronous module, the full name of the Asynchronous Module Definitionspecification, is a modular solution on the browser side. The CommonJSspecification introduction module is loaded synchronously, which is not a problem for the server side, because its modules are stored on the hard disk and can wait for synchronous loading to complete, but In the browser, the module is loaded through the network. If it is synchronously blocked and waits for the module to load, there may be a situation where the browser page is suspended AMD. The module is loaded asynchronously. The loading of the module does not affect the operation of the statements behind it. All statements that depend on this module are defined in a callback function. This callback function will not run until the loading is completed, which RequireJSis the AMDspecification.

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
});

define(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
    return {};
});

/**
define和require在依赖处理和回调执行上都是一样的，不一样的地方是define的回调函数需要有return语句返回模块对象(注意是对象)，这样define定义的模块才能被其他模块引用；require的回调函数不需要return语句，无法被别的模块引用
*/

// html的<script>标签也支持异步加载
// <script src="require.js" defer async="true" ></script> <!-- async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 -->

CMD

CMDThe general module definition is SeaJSthe standardized output of the module definition in the promotion process, and is also a modular asynchronous solution on the browser side. The difference between the CMDand AMDis mainly due to:

• For dependent modules, it AMDis executed in advance (relatively defined callback function, the AMDloader is to load all dependencies in advance and call the execution and then execute the callback function), it CMDis delayed execution (relatively defined callback function, the CMDloader is to load all dependencies After executing the callback function, when the execution requires the dependent module, the loaded dependency is called and returned to the callback function), but RequireJSfrom the 2.0beginning, it can also be changed to delay execution
• AMDIt is dependent on the front (when you define the module, you must declare the module it depends on), and it CMDis the closest to the dependency (only go when you requireneed a certain module -load on demand, return immediately after use ).

define(function(require,exports,module){
　　var a = reuire('require.js');
　　a.dosomething();
　　return {};
});

ES6

ES6The function of the module is implemented at the level of language standards, in order to become a common module solution for browsers and servers. The ES6standard uses exportand export defaultto export the module, and uses the importimport module. In addition , the module that can be used requireto import exportand export defaultexport in the browser environment is still recommended, but it is still recommended to use the importstandard import module.
exportThe export defaultmain differences are as follows:

• exportCan be imported on demand, export defaultno
• exportThere can be multiple, export defaultonly one
• exportCan directly export variable expressions, export defaultno
• exportExport by way of {}, export defaultit needs to be added during import , it is not necessary

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

var c = 3;
var d = a + c;

var obj = { a,b,c }



export {a,b};

export {c,d};

export default obj;

<!-- 3.html 由于浏览器限制，需要启动一个server服务 -->
<!DOCTYPE html>
<html>
<head>
    <title>ES6</title>
</head>
<body>

</body>
<script type="module">
    import {a,b} from "./1.js"; // 导入export
    import m1 from "./1.js"; // 不加{}即导入export default 
    import {c} from "./1.js"; // 导入export 按需导入
    
    console.log(a); // 1
    console.log(b); // ƒ (){ console.log(a); }
    console.log(m1); // {a: 1, c: 3, b: ƒ}
    console.log(c); // 3
</script>
</html>

reference

https://segmentfault.com/a/1190000010426778
https://www.cnblogs.com/leftJS/p/11073481.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html