ES6之前已经出现了js模块加载的方案:
- CommonJS, AMD, CMD都是JS模块化的规范。
- CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现。
- AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。
- RequireJS 遵循的是 AMD,SeaJS 遵循的是CMD。
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS, AMD,
CMD规范,成为浏览器和服务器通用的模块解决方案。
ES6模块主要有两个功能:(export 和 import)
export
用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import
用于在一个模块中加载另一个含有export
接口的模块
export 导出模块
特点:
- 用于导出 多个 变量、函数、类等。
- 导出的内容需要通过 解构赋值 或 命名导入 的方式引入。
lib.js 文件
// 1.一个个导出
// 导出单个变量
export let i = 12;
export let n = 24;
// 导出函数
export function show() {
// xxx
}
// 导出class类
export class Person {
// xxx
}
// 2.导出多个变量
let a = 1;
let b = 2;
let c = 3;
export { a, b, c }
//通过向大括号中添加 a、b、c 变量并且export输出,就可以将对应变量值以 a、b、c 变量标识符形式暴露给其他文件而被读取到
//不能写成 export a 这样的方式,如果这样就相当于 export 1 ,外部文件就获取不到该文件的内部变量 a 的值,
//因为没有对外输出变量接口,只是输出的数字。
import 导入模块
main.js文件
// 1.引入所有成员
import * as items from './lib'; // items为别名
console.log(items.i, items.n); // 12 24
items.show();
new items.Person;
// 2.引入部分指定成员
// 通过import获取 lib.js 文件的内部变量,{}括号内的变量来自于 lib.js 文件export出的变量标识符。
import { a, b } from './lib';
console.log(a, b); // 1,2
export default 默认成员 ( 可以是任何对象 )
前面的例子可以看出,lib.js
使用 import
命令的时候,用户需要知道 lib.js
所暴露出的变量标识符,否则无法加载。
可以使用 export default
命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
特点:
- 用于导出 单个 变量、函数、类等。
- 导出的内容可以通过 任意名称 导入。
- 一个 js 模块只能有一个 `export default
lib.js 文件
let num = 99;
let str = 'string';
export default num; // (num不能加大括号)
//export default str;
//原本直接 export num 外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
main.js文件
// 引入default成员
import items from './lib';
console.log(items); // 99
混合使用
可以在一个模块中同时使用 export
和 export default
:
// module.js
export const name = "Alice";
export function greet() {
console.log("Hello!");
}
export default "This is the default export";
导入时:
import myDefault, { name, greet } from './module.js';
console.log(myDefault); // This is the default export
console.log(name); // Alice
greet(); // Hello!
注意
命名冲突:
使用 export 时,导入的名称必须与导出的名称一致;而 export default 可以任意命名。
模块清晰性:
建议将模块的主要功能或默认值使用 export default 导出,其他辅助功能使用 export 导出。
区别
特性 | export | export default |
---|---|---|
导出数量 | 可以导出多个内容 | 只能导出一个默认内容 |
导入方式 | 需要解构赋值或命名导入 | 可以任意命名导入 |
语法 | export { name, age }; | export default name; |
适用场景 | 导出多个变量、函数、类等 | 导出模块的主要功能或默认值 |
总结
- export:适合导出多个内容,导入时需要解构赋值。
- export default:适合导出模块的主要功能或默认值,导入时可以任意命名。