概述

1.ES6 的模块化分为导出（export） 与导入（import） 两个模块。

2.ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

特点

1.ES6 的模块自动开启严格模式，不管有没有在模块头部加上 use strict;

2.模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

3.每个模块都有自己的作用域，每一个模块内声明的变量都是局部变量，不会污染全局作用域，没有导出的变量在去全局作用域访问就会报错。

js文件：

var a=20;
var b=a+100;
var c=26;
export default b;

html文件：

 <script type="module">
        import b from "./a.js";
        console.log(b);
        console.log(c);
    </script>

4.每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

1.与from关联使用，此时script标签的type必须设置为module

2.单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import。

1.export可以导出多个数据

2.与default关联使用，并且一个js模块中只能有一个或者0个export default语句。

3.export和export default区别

export导出的数据，import导入时必须和导出的标识符一样且要写在解构{}中，而export default导出的数据，import导入时任何标识符都可以接收，不用写在{}解构中。

export var a=100;
export var obj={name:"jzx",age:26};
export class fn{};
export function fm(){};
export var str="phm";
var d="gem";
export default d;

js文件

   <script type="module">
        import str_name,{a,obj,fn,fm,str} from "./b.js";
        console.log(str_name,a,obj,fn,fm,str);
    </script>

html文件

则常用export default导出一个对象，把需要导出的数据放在对象中，标识符（变量名）就是对象的成员名，成员值就是标识符的值。取出其中一个的值就用点语法。

js文件

html文件

添加module：因为脚本中要用js语言引入一个外部的js文件，需要读取文件编码。使用插件让浏览器能够识别import语法。

且import导入时from后面跟的是相对网络路径，要求文件要在同一个服务器下打开。使用本地运行文件就会报错，VSC可以下载Live Server插件使用Open with Live Server打开。