理解JS ES6中的模块化（export和import）

由于历史原因，直接引入的多个JS文件之间可能会产生互相污染（变量、函数等），为了解决这个问题，在ES标准中引入了模块化的概念。

在ES5中使用commonJS 的方式进行模块化

引入方式

<script src="XXX/AAA.js" type="module"></script>
<script src="XXX/BBB.js" type="module"></script>

type="module"表示使用模块化，在这种方式下，以上述代码为例，则由于模块作用域（每个模块文件都是独立的作用域，不是全局的），BBB中不能使用AAA文件中定义的东西，不加type="module"则都会变成全局的，别人就能直接访问了。

ES6中使用新的方法进行模块化：使用 `export` 和 `import` 关键字

一、导出

方法1.声明时直接导出

// AAA文件中
export var a1 = '1';

export function f1() {

} 

export const f2 = () => {
/ / 箭头函数导出
}

方法2.统一在最后导出

// AAA文件中
var a1 = '1';

function f1() {

} 

const f2 = () => {
/ / 箭头函数导出
}

export {
    a1,
    f1,
    f2,
}

方法3.导出时特殊操作：起别名

// AAA文件中
var a1 = '1';

function f1() {

} 

const f2 = () => {
/ / 箭头函数导出
}

// as 后跟的名字是导出的别名
export {
    a1 as A1,
    f1 as F1,
    f2 as F2,
}

方法4.导出时特殊操作：直接导出导入内容

// 意思是导出 从XXX中导入的a1,f1,f2, 常写在一个文件中用于导出全部js，类似于库的头文件去给别人导入
export {a1,f1,f2} from './XXX.js'

方法4.导出时特殊操作：使用`default`默认导出

export default function() {}

这种导出方式在导入时即可自己定义名称且不需要加{}，和其他导出方式共存，但是一个js文件只能有一个default

方法5.导出时特殊操作：导出类

ES6中类的本就是函数，使用时需要创建一个实例，也可以直接导出一个实例（类似于导出变量）

// AAA文件中
export class Dog {

    eat(){
        console.log('吃饭')
    }
}
// BBB 文件中
import {Dog} from './XXX'

const dog = new Dog();
dog.eat();

6.注意

export 是关键字，后面跟的并不是对象，而已一个导出列表，这里的a1,f1,f2的写法并不是ES6中属性的增强写法。

二、导入

方法1：直接导入

a1,f1,f2 是导出的时候的名称，不能更改，如果导出时有别名则这里导入的就是别名。

import {a1,f1,f2} from './XXX.js'

方法2：导入时起别名

import {a1 as A1 ,f1 as F1 ,f2 as F2} from './XXX.js'

方法3：导入时使用`*`

import  * as aaa from './XXX.js'

// aaa 此时是一个对象
aaa.a1;
aaa.f1;
aaa.f2;

方法4：导入使用`default`方式导出的模块

// aaa 此时即是导出的内容
import  aaa  from './XXX.js'

5.注意

import 是关键字，后面跟的并不是对象.
from 后面必须有.js 。如果是在框架中（比如Vue），则可以不写，框架会处理自动添加上。

6.import 和 export 的本质

本质上是对导出对象的绑定。js引擎会有一个模块环境记录(module enviroment record) ，对所有的东西进行bindings，如果导出的js修改了导出的值，那么导入方也会被修改。这里和Node中是不同的。参考本文底部的文章。

三、import()函数

有时需要再代码中再去加载某个模块，而不是一开是就加载，这样可能会写如下代码

if(dev){
  import('./XXX.js')
}

此时不能去写关键字方式的导入，因为关键字是编译时期解析，这里有js代码那么是运行时去解析的，运行时去解析编译时期解析的东西是错误的。ES6中提供了import函数去处理这样的情况。
需要注意的是import函数是一个异步加载的，返回的是个promise对象，所以完整的写法如下

if(dev){
  import('./XXX.js').then(res=>{
  // res 即是导出的内容
  }).catch(err=>{
  })
}

读者还可以对比Node环境下模块化这篇文章

最后编辑于：2021.04.05 20:01:56