ES6模块化（ESM）

ES6模块化是指在ES6（ECMAScript2015）中引入的一种模块化编程规范，用于将代码组织成易于维护和复用的小块。将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6模块化有以下几个特点：

首先，在创建文件导入时<script>内需要添加type=“module”模块化设置,才能正确引入模块化js内容。

注意：一个文件就是一个模块(js文件) ：   文件名就是模块名

<script type="module" src="./index.js"></script>

1.导入和导出：ES6模块化利用 import 和 export 语句来定义和导出模块的功能。

误区：

// console.log(name);//不能直接访问其它模块的内容

单个导出：

index.js文件内： 

// 导入其他小模块的数据内容
import {name} from "./moth.js"; 需要完整的后缀
console.log(name);

moth.js文件内：  

// 定义一个小模块
let obj={
    name:"张三",
    age:18
}

export let name="李四";
export let uname=obj.name;

批量导出： 

 index.js文件内： 

// 导入其他小模块的数据内容
import {fn1,fn2,fn3} from "./moth.js";
console.log(fn1);//fn {name: '张三', age: 18}
console.log(fn2);//fn {name: '李四', age: 19}
console.log(fn3);//fn {name: '梁五', age: 20}

moth.js文件内：  

//批量导出
class fn{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
}
let fn1=new fn("张三",18);
let fn2=new fn("李四",19);
let fn3=new fn("梁五",20);

export {fn1,fn2,fn3};

 2.默认导出：ES6还允许您导出模块的默认功能，并且可以使用 import 语句来导入，可以自我定义到处命名。

注意：一个模块中只能有一个默认导出！

 index.js文件内： 

//默认导出内容（自定义命名）
import xx from "./moth.js";
console.log(xx.id);//1
console.log(xx.msg);//ok
xx.fnx();//hello world

 moth.js文件内： 

//默认导出
export default {
    id: 1,
    msg: 'ok',
    fnx() {
        console.log("hello world");
    }
}

3.模块循环依赖：ES6模块化支持循环依赖，这可以在模块之间建立复杂的关系。

// 定义模块A
import { b } from './B.js';
export const a = 'Hello';

// 定义模块B
import { a } from './A.js';
export const b = a + ' Bady';

// 使用模块
import { a, b } from './A.js';
console.log(a); // 'Hello A'
console.log(b); // 'Hello A Bady'

 除此之外，ES6模块化还支持动态导入，可以根据需要在运行时动态加载模块。总之，ES6模块化为 JavaScript 开发者带来了更好的代码封装和模块化管理方式。