首页 > 网络编程 > JavaScript > javascript技巧 > js模块导入和导出

JavaScript模块导入和导出方式举例

2025-09-17 14:27:25 作者：Bling_Bling_1

文章介绍了ES6模块化方法,涵盖命名导出（多值导出,需指定名称）、默认导出（单一值导出,简化使用）、动态导入（按需加载）及as关键字（重命名,解决冲突）等核心内容,对js模块导入和导出相关知识感兴趣的朋友一起看看吧

js模块导入和导出方式

在现代JavaScript开发中，模块化编程已成为组织和管理代码的核心方法。模块化允许开发者将大型程序拆分为独立的、可复用的文件，从而提高代码的可维护性和可读性。以下是我总结的JavaScript中的模块导入和导出方式。

在ES6中，引入了JavaScript的模块系统，目前最推荐的模块化方法，是使用import和export关键字来实现模块的导入和导出。

ES6模块提供了两种主要的导出方式：命名导出(Named Exports)和默认导出(Default Export)。

命名导出和导入

(1) 命名导出

命名导出可以在声明时直接导出，也可以声明后再导出，下面是示例代码：

声明时直接导出

//main.js
export const PI = 3.1415;
export function add(x, y) { 
	return x + y;
}

声明后再导出

const PI = 3.1415;
function add(x, y) { 
	return x + y;
}
export { PI,add }

(2) 导入命名导出模块：

import { PI, add } from './math.js';

(3) 命名导出特点：

允许一个模块导出多个值，并且可以选择性导入，灵活性好
导出时需指定名称，导入时需使用相同名称
指定了确切的名字，便于代码追踪和维护

(4) 适用场景

适合有多个功能的模块

默认导出和导入

(1) 默认导出

每个模块只能有一个默认导出，默认导出可以在声明时直接导出，也可以声明后再导出，下面是示例代码：

声明时直接导出

// add.js
export default function add(x,y){
    return x + y;
}
//默认导出可以省略函数名，如下：
export default function (x,y){
    return x + y;
}

声明后再导出

function add(x,y){
    return x + y;
}
export default add

(2) 导入默认导出模块：

import add from './add.js';

导入默认导出时，不需要和导出时的名称保持一致，可以自定义命名，但是推荐的命名方式是和模块名称保持一致。比如上示代码，导入的模块是add.js，所以我们导入的名称和他保持一致。

(3) 默认导出特点：

简化了单个值的导入和导出，可以让代码更加简洁

(4) 适用场景

每个模块只能有一个默认导出
适合单一功能的模块

也可以同时在一个模块中同时使用命名导出和默认导出，但是要记住默认导出只能有一个，

导入时，分别指定命名导出和默认导出即可。

动态导入

ES6还支持动态导入，返回一个Promise，适用于按需加载和代码分割的场景：

import('./math.js')
  .then(module => {
    console.log(module.add(2, 3));
  })
  .catch(err => {
    console.error('模块加载失败', err);
  });

或者使用async/await：

async function loadModule() {
  const module = await import('./math.js');
  module.add(2, 3);
}

as关键字

（1）功能：

as关键字，用于重命名导入或导出的值。

（2）使用场景：

解决名称冲突，使用当前上下文，提高可读性。

（3）用法：

在import导入语句中使用as关键字，修改导入后的名称，后续调用都使用修改后的名称。

//1.假设add.js中add函数是命名导出
import {add as count} from './add.js'
//2.假设add.js中add函数是默认导出
//默认导出在导入时本身就可以自定义名称，所以不能直接使用as关键字重命名
//但还有一种写法，和命名导出写法一样
import {default as count} from './add.js'
//3.将moduel.js模块中的所有导出内容导入，并聚合到一个moudle对象中
import *as moudle from './moudle.js'
console.log(moudle.add(1,2))

在export导入语句中使用as关键字，导出时使用as关键字修改了名称，外部导入时要使用修改后的名称，也可以通过as关键字直接指定默认导出。

function add(x,y){
    return x+y;
}
export {add as count}
//将add函数作为默认导出
//和'export default add' 效果一样
export { add as count }

到此这篇关于JavaScript模块导入和导出方式举例的文章就介绍到这了,更多相关js模块导入和导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！