JS模块的导出和引入

模块规范

在JavaScript中，有两种常见的模块化规范：CommonJS和ES6。

• CommonJS是Node.js的默认规范，它使用require和module.exports来导入和导出模块。
• ES6是ECMAScript 2015的标准，它使用import和export来导入和导出模块。这两种规范有什么概念和区别呢？我们来看看。

概念和区别

1. 首先，概念上，CommonJS是基于值的导出和导入，也就是说，当我们导出一个模块时，我们实际上是导出了一个对象的拷贝。当我们导入一个模块时，我们实际上是获取了一个对象的引用。这意味着，如果我们在导出后修改了模块内部的值，那么导入的模块也会受到影响。例如：

   // a.js
   let a = 1;
   module.exports = a;
   
   // b.js
   let a = require('./a');
   console.log(a); // 1
   a = 2;
   console.log(a); // 2
   
   // c.js
   let a = require('./a');
   console.log(a); // 1
   

   可以看到，当我们在b.js中修改了a的值后，c.js中导入的a并没有改变，因为它们是不同的对象引用。

   而ES6是基于名称的导出和导入，也就是说，当我们导出一个模块时，我们实际上是导出了一个变量的声明。当我们导入一个模块时，我们实际上是创建了一个变量的绑定。这意味着，如果我们在导出后修改了模块内部的值，那么导入的模块也会同步更新。例如：

   // a.js
   export let a = 1;
   
   // b.js
   import { a } from './a';
   console.log(a); // 1
   a = 2;
   console.log(a); // 2
   
   // c.js
   import { a } from './a';
   console.log(a); // 2
   

   可以看到，当我们在b.js中修改了a的值后，c.js中导入的a也跟着改变了，因为它们是同一个变量绑定。

2. 其次，区别上，CommonJS是同步的加载方式，也就是说，当我们使用require时，它会立即执行模块代码，并返回结果。这适合于服务器端的环境，因为服务器端的模块通常都已经安装好了，不需要等待网络请求。但是，在浏览器端的环境中，这种方式就不太合适了，因为浏览器端的模块通常需要从远程服务器获取，如果使用同步的方式加载，就会造成页面阻塞和性能下降。

   而ES6是异步的加载方式，也就是说，当我们使用import时，它会返回一个promise对象，并且不会阻塞后面的代码执行。这适合于浏览器端的环境，因为浏览器端的模块可以利用网络请求来并行加载，并且不会影响页面渲染和交互。但是，在服务器端的环境中，这种方式就需要额外的配置和工具来支持。

   总之，CommonJS和ES6都是JavaScript的模块化规范，它们有不同的概念和区别。在实际开发中，我们需要根据不同的场景和需求来选择合适的规范，并且可以使用一些工具和转换器来兼容不同的规范。