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 开发者带来了更好的代码封装和模块化管理方式。