小浪底水利枢纽建设管理局网站,精神文明地方联盟网站建设,wordpress多格式视频播放插件,防查水表 wordpress 评论ES模块导入、导出学习笔记 1、命名导出、导入1.1、声明时直接导出1.2、先声明#xff0c;再导出 2、默认导出2.1、声明时直接导出2.2、先声明#xff0c;再导出 3、命名导出 VS 默认导出3.1、命名导出3.2、默认导出3.3、同时使用 4、使用 as 关键字4.1、在 import 中使用 as4… ES模块导入、导出学习笔记 1、命名导出、导入1.1、声明时直接导出1.2、先声明再导出 2、默认导出2.1、声明时直接导出2.2、先声明再导出 3、命名导出 VS 默认导出3.1、命名导出3.2、默认导出3.3、同时使用 4、使用 as 关键字4.1、在 import 中使用 as4.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())
