ES模块导入、导出学习笔记

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())