ES模块导入、导出学习笔记
ES模块导入、导出学习笔记
- 1、命名导出、导入
- 1.1、声明时直接导出
- 1.2、先声明，再导出
- 2、默认导出、导入
- 2.1、声明时直接导出
- 2.2、先声明，再导出
- 3、命名导出 VS 默认导出
- 3.1、命名导出
- 3.2、默认导出
- 3.3、同时使用
- 4、使用 as 关键字
- 4.1、在 import 中使用 as
- 4.2、在 export 中使用 as
- 5、动态导入
1、命名导出、导入
1.1、声明时直接导出
- 导出
/*** 定义一个变量*/
export const src = "我是一个字符串";/*** 定义一个函数*/
export const func = function () {console.log("我是一个函数");
};
- 导入
// 分别导入
import { src, func } from "@/common/index";onMounted(() => {// 打印变量console.log(src, "打印变量");// 调用函数func();
});
1.2、先声明，再导出
- 导出
/*** 定义一个变量*/
const src = "我是一个字符串";/*** 定义一个函数*/
const func = function () {console.log("我是一个函数");
};export { src, func };
- 导入
// 分别导入
import { src, func } from "@/common/index";onMounted(() => {// 打印变量console.log(src, "打印变量");// 调用函数func();
});
2、默认导出、导入
2.1、声明时直接导出
- 默认导出跟命名导出的区别：
- 默认导出比命名导出多一个default关键字
- 默认导出可以省略函数名
- 导出
/*** 定义一个函数*/
export default function func() {console.log("我是一个函数");
}
- 导入
// 导入默认导出的方法，方法名随便
import func from "@/common/index";onMounted(() => {// 调用函数func();
});
2.2、先声明，再导出
- 导出
/*** 定义一个变量*/
const src = "我是一个字符串";/*** 定义一个函数*/
function func() {console.log("我是一个函数");
}export default { src, func };
- 导入
import common from "@/common/index";onMounted(() => {// 调用变量console.log(common.src);// 调用函数common.func();
});
3、命名导出 VS 默认导出
3.1、命名导出
- 可以导出多个值，并且可以选择性导入，灵活性更好
- 指定了确切的名字，便于代码追踪和维护
- 适合有多个功能的模块
3.2、默认导出
- 简化了单个值的导入和导出，可以让代码更加简洁
- 适合功能单一的模块
1、 命名导出：导入的时候需要花括号（{}）。
2、 默认导出：导入的时候不需要花括号（{}）。
3.3、同时使用
- 导出
export const common = {src: "我是一个字符串",func: function () {console.log("我是一个函数");},
};export default function func2() {console.log("我是一个默认函数2");
}
- 导入
import func2, { common } from "@/common/index";onMounted(() => {// 调用变量console.log(common.src);// 调用函数common.func();// 调用函数func2();
});
4、使用 as 关键字
- 功能：用于重命名导入或导出的值
- 使用场景：解决名称冲突、适用当前上下文，提高可读性
4.1、在 import 中使用 as
- 假设 common 中 func 函数是命名导出
import { func as sayHandle } from '@/common/index'
- 假设 common 中 func 函数是默认导出
import { default as sayHandle } from '@/common/index'
- 将 module 中的所有导出内容聚合到 module 对象中
import * as module from '@/common/index'// 使用方法
console.log(module.func())
4.2、在 export 中使用 as
function func(name){return `Hello,${name}!`
}export { func as sayHandle }// 或者将 func 函数默认导出
// 和 == export default func == 是一样的效果
export { func as default }
5、动态导入
- 示例1：
import("@/common/index").then((module)=>{console.log(module.func())
})
- 示例2：
const module = await import("@/common/index")
consolg.log(module.func())