ES6 module语法中export和import的使用

迷南。 2022-09-04 09:47 299阅读 0赞

# ES6模块与CommonJS模块的差异 #

ES6 模块与 CommonJS 模块完全不同  
它们有三个重大差异

*  CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
 *  CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
 *  CommonJS 模块的 `require()` 是同步加载模块，ES6 模块的 `import` 命令是异步加载，有一个独立的模块依赖的解析阶段  
    第二个差异是 CommonJS 加载的是一个对象（即 `module.exports` 属性），该对象只有在脚本运行完才会生成，而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

CommonJS 模块是 Node.js 专用的，语法上面，与 ES6 模块最明显的差异是，CommonJS 模块使用 `require()` 和 `module.exports` ，ES6 模块使用 `import` 和 `export`。

# ES6 中 module 的语法 #

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。  
ES6模块不是对象，而是通过 `export` 命令显式指定输出的代码，再通过 `import` 命令输入。

## export 命令 ##

模块功能主要由两个命令构成：`export` 和 `import`。 `export` 命令用于规定模块的对外接口，`import` 命令用于输入其他模块提供的功能。  
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用 `export` 关键字输出该变量。

### export 输出变量 ###

// export.js
    let firstName = 'Mark'
    let lastName = 'Dave'
    
    export {  firstName, lastName }

上面代码在 `export` 命令后面，使用大括号指定所要输出的一组变量。

### export 输出函数或类 ###

`export` 命令除了输出变量，还可以输出函数或类（class）

export function multiply(x, y) { 
    	return x * y
    }

上面代码对外输出一个函数 \`multiply

### export使用as重命名 ###

通常情况下，`export` 输出的变量是本来的名字，但是可以使用 `as` 关键字重命名

function fun1() {  ... }
    function fun2() {  ... }
    
    export { 
    	fun1 as streamFun1,
    	fun2 as streamFun2,
    	fun2 as streamLatestFun 
    }

上面代码使用 `as` 关键字，重命名了函数 `fun1` 和 `fun2` 的对外接口，重命名后，`fun2` 可以用不同的名字输出两次

### export 规定的对外接口，必须与模块内部的变量一一对应 ###

`export` 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

// 报错
    export 1;
    
    // 报错
    let m = 1
    export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出1，第二种写法通过变量 m，还是直接输出1,1只是一个值，不是接口。正确的写法如下：

// 写法1
    export let m = 1;
    
    // 写法2
    let m = 1
    export {  m }
    
    // 写法3
    let n = 2
    export {  n as m }

上面三种写法都是正确的，规定了对外的接口 m。其他脚本可以通过这个接口，取到值 1.它们的实质是，在接口名和模块内部变量之间，建立了一一对应的关系。

同样，`function` 和 `class` 的输出，也必须同样遵守这样的写法

// 报错
    function f() { }
    export f
    
    // 正确
    function f() { }
    export {  f }
    
    // 正确
    export function f() { }

### export可以出现在模块的任何位置，只要处于模块顶层就可以 ###

`export` 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错

function foo() { 
    	export default 'bar' // SyntaxError
    }
    foo()

上面代码中，`export` 语句放在函数之中，结果报错

### export default 命令 ###

使用 `import` 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。  
为了给用户提供方便，让它们不用阅读文档就能加载模块，就要用到 `export default` 命令，为模块指定默认输出。

// export-default.js
    export default function() { 
    	console.log('foo')
    }

上面代码是一个模块文件 `export-default.js` ，它默认输出是一个函数。  
其他模块加载该模块时，`import` 命令可以为该匿名函数指定任意名字。

// import-default.js
    import customName from './export-default'
    customName()

上面代码的 `import` 命令，可以用任意名称指向 `export-default.js` 输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时 `import` 命令后面，不使用大括号。  
`export default` 命令用在非匿名函数前，也是可以的

export default function foo() { 
    	console.log('foo')
    }
    
    // 或者写成
    function foo() { 
    	console.log('foo')
    }
    export default foo

上面代码中，`foo` 函数的函数名 `foo` ，在模块外部是无效的。加载的时候，视同匿名函数加载。  
下面比较一下默认输出和正常输出：

// 第一组
    export default function crc32() { }
    
    import crc32 from 'crc32'
    
    // 第二组
    export function crc32() { }
    
    import {  crc32 } from 'crc32'

上面两组写法，第一组是使用 `export default` 时，对应的 `import` 语句不需要使用大括号；第二组是不使用 `export default` 时，对应的 `import` 语句需要使用大括号。

`export default` 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 `export default` 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 `export default` 命令。  
本质上，`export default` 就是输出一个叫做 `default` 的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

// module.js
    function add(x, y) { 
    	return x + y
    }
    export {  add as default }
    // 等同于
    export default add
    
    // main.js
    import {  default as foo } from 'modules'
    // 等同于
    import foo from 'modules'

正是因为 `export default` 命令其实只是输出一个叫做 `default` 的变量，所以它后面不能跟变量声明语句。

// 正确
    export let a = 1
    
    // 正确
    let a = 1
    export default a
    
    // 错误
    export default let a = 1

上面代码中，`export default a` 的含义是将变量 a 的值赋值给变量 `default`。所以，最后一种写法会报错。  
同样地，因为 `export default` 命令的本质是将后面的值，赋给 `default` 变量，所以可以直接将一根值写在 `rcport default` 之后

// 正确
    export default 42
    
    // 报错
    export 42

如果想在一条 `import` 语句中，同时输入默认方法和其他接口，可以写成下面这样

import _, {  each, forEach } from 'lodash'

`export default` 也可以用来输出类

// MyClass.js
    export default class {  ... }
    
    // main.js
    import MyClass from 'MyClass'
    let o = new MyClass()

## import 命令 ##

使用 `export` 命令定义了模块的对外接口后，其他 js 文件就可以通过 `import` 命令加载这个模块。

// import.js
    import {  firstName, lastName } from './export.js'
    
    function setName(element) { 
    	element.textContent = firstName + ' ' + lastName
    }

上面代码的 `import` 命令，用于加载 `export.js` 文件，并从中输入变量。`import` 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块 `export.js` 对外借款的名称相同

### import 使用 as 重命名变量 ###

如果想为输入的变量重新取一个名字，`import` 命令要使用 `as` 关键字，将输入的变量重命名。

import {  lastName } as surname from './export.js'

### import\`命令输入的变量都是只读的 ###

`import` 命令输入的变量都是只读的，，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

import {  a } from './xxx.js
    a = { } // Syntax Error: 'a' is read-only

上面代码中，脚本加载了变量 a，对其重新赋值就会报错，因为 a 是一个只读的接口，但是，如果 a 是一个对象，改写 a 的属性是允许的

import {  a } from './xxx.js'
    
    a.foo = 'hello' // 合法操作

上面代码中，a 的属性可以改写成功，并且其他模块也可以读到改写后的值，不过，这种写法很难查错，建议凡是输入的变量，丢完全当做只读，不要轻易改变它的属性。

`import` 后面的 `from` 指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 javascript 引擎该模块的位置。

### import 具有提升效果 ###

`import` 命令具有提升效果，会提升到整个模块的头部，首先执行

foo()
    
    import {  foo } from 'my_module'

上面的代码不会报错，因为 `import` 的执行早于 `foo` 的调用。这种行为的本质是，`import` 命令是编译阶段执行的，在代码运行之前。

### import 是静态执行，不能使用表达式和变量 ###

由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构

// 报错
    import {  'f' + 'oo' } from ''my_module
    
    // 报错
    let module = 'my_module'
    import {  foo } from module
    
    // 报错
    if (x === 1) { 
    	import {  foo } from 'module1'
    } else { 
    	import {  foo } from 'module2'
    }

上面三种写法都会报错，因为它们用到了表达式、变量和 if 结构。在静态分析阶段，这些语法是没法得到值的。  
最后，`import` 语句会执行所加载的模块，因此可以有下面的写法：

import 'lodash'

上面代码仅仅执行 `lodash` 模块，但是不输入任何值。  
如果多次重复执行同一句 `import` 语句，那么只会执行一次，而不会执行多次。

import 'lodash'
    import 'lodash'

上面代码加载了两次 `lodash`，但是只会执行一次

import {  foo } from 'my_module'
    import {  bar } from 'my_module'
    
    // 等同于
    import {  foo, bar } from 'my_module'

上面代码中，虽然 `foo` 和 `bar` 在两个语句中加载，但是它们对应的是同一个 `my_module` 模块，也就是说，`import` 语句是`singleton` 模式。

### 模块的整体加载 ###

除了指定加载某个输出值，还可以使用整体加载，即用星号（`*`）指定一个对象，所有输出值都加载在这个对象上。  
例如，下面是一个 `circle.js` 文件，它输出两个方法 `area` 和 `circum`

// circle.js
    export function area(radius) { 
    	return Math.PI * radius * radius
    }
    export function circum(radius) { 
    	return @ * Math.PI * radius
    }

现在，加载这个模块

// main.js
    import { area, circum} from './circle'
    
    console.log(area(4))
    console.log(circum(14))

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle'
    
    console.log(circle.area(4))
    console.log(circle.circum(14))

注意：模块整体加载所在的那个对象（上例是 circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle'
    
    // 下面两行都是不允许的
    circle.foo = 'hello'
    circle.area = function () { }

## export 和 import 的复合写法 ##

如果在一根模块之中，先输入后输出同一个模块，`import` 语句可以与 `export` 语句写在一起。

export {  foo, bar } from 'my_module'
    
    // 可以简单理解为
    import {  foo, bar } from 'my_module'
    export {  foo, bar }

上面代码中，`export` 和 `import` 语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，`foo` 和 `bar` 实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用 `foo` 和 `bar`。  
模块的接口改名和整体输出，也可以采用这种写法

// 接口改名
    export {  foo as myFoo } from 'my_module'
    
    // 整体输出
    export * from 'my_module'

默认接口的写法如下：

export {  default } from 'foo'

具名接口改为默认接口的写法如下

export {  es6 as default } from './someModule'
    
    // 等同于
    import {  es6 } from './someModule'
    export default es6

同样的，默认接口也可以改名为具名接口

export {  default as es6 } from './someModule'

## import() ##

`import` 和 `export` 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中）  
ES2020提案引入 `import()` 函数，支持动态加载模块

import(specifier)

上面代码中，`import` 函数的参数 `specifier`，指定所要加载的模块的位置，`import` 命令能够接受上面参数，`import()` 函数就能接受上面参数，两者区别主要是后者为动态加载。  
`import()` 返回一个 Promise 对象。如

`import()` 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，`import()` 函数与所加载的模块没有静态连接关系，这点也是与 `import` 语句不相同。`import()` 类似于 Node 的 `require` 方法，区别主要是前者是异步加载，后者是同步加载。

### 适用场合 ###

#### 按需加载 ####

`import()` 可以在需要的时候，再加载某个模块

button.addEventListener('click', event => { 
      import('./dialogBox.js')
      .then(dialogBox => { 
        dialogBox.open();
      })
      .catch(error => { 
        /* Error handling */
      })
    });

上面代码中，`import()` 方法放在 `click` 事件的监听函数中，只有用户点击了按钮，才会加载这个模块。

#### 条件加载 ####

`import()` 可以放在 if 代码块，根据不同的情况，加载不同的模块

if (condition) { 
      import('moduleA').then(...);
    } else { 
      import('moduleB').then(...);
    }

上面代码中，如果满足条件，就加载模块 A，否则加载模块 B

#### 动态的模块路径 ####

`import()` 允许模块路径动态生成

import(f())
    .then(...)

上面代码中，根据函数 f 的返回结果，加载不同的模块。

### 注意点 ###

`import()` 加载模块成功以后，这个模块会作为一个对象，当作 `then` 方法的参数。因此，可以使用对象结构赋值的语法，获取输出接口

import('./myModule.js')
    .then({ export1, export2}) => { 
    	// ...
    })

上面代码中，`export1` 和 `export2` 都是 `myModule.js` 的输出接口，可以解构获得  
如果想同时加载多个模块，可以

Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ])
    .then(([module1, module2, module3]) => { 
       ···
    });

`import()` 也可以用在 async 函数中

async function main() { 
      const myModule = await import('./myModule.js');
      const { export1, export2} = await import('./myModule.js');
      const [module1, module2, module3] =
        await Promise.all([
          import('./module1.js'),
          import('./module2.js'),
          import('./module3.js'),
        ]);
    }
    main();