Importación y exportación modular Js

Importación y exportación modular Js

CommonJs, AMD, CMD, ES6Se definen en las especificaciones para el uso modular, por lo que la dependencia entre el módulo de procesamiento y la introducción de módulos estandarizados y resolver conflictos de nombres, y para hacer uso de un enfoque modular para sistemas complejos se descomponen estructura del código es más razonable , Un módulo manejable con mayor capacidad de mantenimiento.

CommonJS

CommonJSEs NodeJsla especificación de los módulos del lado del servidor. Según esta especificación, cada archivo es un módulo con su propio alcance. Las variables, funciones y clases definidas en un archivo son privadas e invisibles para otros archivos. CommonJSLa especificación estipula que dentro de cada módulo, las modulevariables representan el módulo actual. Esta variable es un objeto y sus exportsatributos son interfaces externas. Cargar un módulo es en realidad cargar las exportspropiedades del módulo . En resumen, las CommonJSespecificaciones se requireimportan module.exportsy exportsexportan.

// 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

También se puede usar exportspara exportar, pero no debe reescribir exportsel puntero, ya que exportses solo un puntero y apunta al module.exportsárea de memoria, es decir exports = module.exports = {}, la reescritura exportscambia el puntero al punto en que el módulo no se puede exportar, lo que simplemente exportsproporciona una solución simple para escribir Al final, de hecho, todos usan module.exportsexportación. Además, si se utiliza de forma simultánea en un solo archivo module.exportsy exportsluego exportar sólo module.exportsel contenido

// 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

AMDLa especificación no es AMD YES, la AMDdefinición de módulo asíncrono, el nombre completo de la Asynchronous Module Definitionespecificación, es una solución modular en el lado del navegador. El CommonJSmódulo de introducción de la especificación se carga sincrónicamente, lo que no es un problema para el lado del servidor, porque sus módulos se almacenan en el disco duro y pueden esperar a que se complete la carga sincrónica, pero En el navegador, el módulo se carga a través de la red. Si está bloqueado sincrónicamente y espera a que se cargue el módulo, puede haber una situación en la que la página del navegador se suspende AMD. El módulo se carga de forma asíncrona. La carga del módulo no afecta el funcionamiento de las declaraciones detrás de él. Todas las declaraciones que dependen de este módulo se definen en una función de devolución de llamada. Esta función de devolución de llamada no se ejecutará hasta que se complete la carga, que RequireJSes la AMDespecificación.

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

CMDLa definición general del módulo es SeaJSla salida estandarizada de la definición del módulo en el proceso de promoción, y también es una solución asincrónica modular en el lado del navegador. La diferencia entre CMDy AMDse debe principalmente a:

• Para módulos dependientes, se AMDejecuta por adelantado (función de devolución de llamada relativamente definida, el AMDcargador debe cargar todas las dependencias por adelantado y llamar a la ejecución y luego ejecutar la función de devolución de llamada), CMDes una ejecución retrasada (función de devolución de llamada relativamente definida, el CMDcargador debe cargar todas las dependencias Después de ejecutar la función de devolución de llamada, cuando la ejecución requiere el módulo dependiente, la dependencia cargada se llama y se devuelve a la función de devolución de llamada), pero RequireJSdesde el 2.0principio, también se puede cambiar para retrasar la ejecución
• AMDDepende del frente (cuando define el módulo, debe declarar el módulo del que depende), y CMDes el más cercano a la dependencia (solo vaya cuando requirenecesite un determinado módulo: carga bajo demanda, regrese inmediatamente después del uso ).

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

ES6

ES6La función del módulo se implementa a nivel de estándares de lenguaje, para convertirse en una solución de módulo común para navegadores y servidores. El ES6estándar usa exporty export defaultexporta módulos, y usa importmódulos de importación. Además , aún se recomienda el módulo que se puede usar requirepara importar exporty export defaultexportar en el entorno del navegador , pero se recomienda usar el importmódulo de importación estándar.
exportLas export defaultprincipales diferencias son las siguientes:

• exportSe puede importar bajo demanda, export defaultno
• exportPuede haber múltiples, export defaultsolo uno
• exportPuede exportar directamente expresiones variables, export defaultno
• exportA modo de exportación {}, export defaultdebe agregarse durante la importación , no es necesario

// 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>

Referencia

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