当前位置: 首页 > news >正文

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())
http://www.lryc.cn/news/431379.html

相关文章:

  • Bagging: 数量,而不是质量。
  • 维信小程序禁止截屏/录屏
  • 不同大模型代码解释对比
  • Python函数的编写
  • Linux下的常用命令分享 二(ubuntu 16.04)
  • FPGA随记——OSERDESE2和IERDESE2
  • Xmind思维导图领衔,三款常备神器助你2024年思维升级!
  • SEO服务值得吗?提升销售和营销策略的5种方法
  • 传统CV算法——角点特征点提取匹配算法实战
  • 小米电视使用adb 卸载自带应用教程
  • 编译FFmpeg动态库
  • yum的基本使用方法
  • Nginx+Keepalive集群实战
  • [数据集][目标检测]街道乱放广告牌检测数据集VOC+YOLO格式114张1类别
  • 腾讯云的免费ssl证书过期后不占用免费额度
  • MySQL学习(DDL,DML,DQL)基本语法总结
  • JAVA学习-练习试用Java实现“单词反转”
  • 【MySQL】深圳大学数据库实验一
  • 接口测试 —— 如何设计高效的测试用例!
  • linux top命令介绍以及使用
  • 必备资源!精选大模型领域100篇必读论文,赶紧加入收藏夹!
  • 基于STM32设计的防盗书包(华为云IOT)(216)
  • 2024高教社杯全国大学生数学建模竞赛C题原创python代码
  • Java基础 - 14 - Java高级技术
  • glsl着色器学习(六)
  • 毒枸杞事件启示录:EasyCVR视频AI智能监管方案如何重塑食品卫生安全防线
  • git进阶·团队开发的时候为何要创建临时分支来修复bug
  • Unity 性能优化工具收集
  • linux下的Socket网络编程教程
  • 华为人工智能重要服务总结