JS函数如何定义模块化函数_JS模块化函数定义与导出导入方法

新闻中心 NEWS CENTER

2025-11-06

浏览次数：次

模块化函数通过封装功能提升代码可维护性，ES6使用export导出、import导入函数，需在HTML中设置type="module"以支持模块加载。

js函数如何定义模块化函数_js模块化函数定义与导出导入方法

在J*aScript中，模块化函数的定义与导出导入是现代前端开发的重要基础。通过模块化，可以将功能拆分到不同的文件中，提高代码的可维护性、复用性和可读性。

模块化函数是指将一组相关的函数和变量封装在一个独立的作用域中，对外提供明确的接口（导出），同时隐藏内部实现细节。这样可以避免全局污染，提升协作效率。

ES6引入了原生的模块系统，使用 export 和 import 实现模块化。

1. 定义并导出函数（命名导出）：

可以在一个文件中导出多个函数。

// mathUtils.js
export function add(a, b) {
  return a + b;
}
<p>export function multiply(a, b) {
return a * b;
}

2. 默认导出（每个文件一个）：

适合导出单个主要功能，如类或主函数。

// greeting.js
export default function() {
  console.log("Hello from module!");
}

使用 import 语句从其他模块加载函数。

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

1. 导入命名导出的函数：

// main.js
import { add, multiply } from './mathUtils.js';
<p>console.log(add(2, 3));     // 5
console.log(multiply(4, 5)); // 20

2. 导入默认导出：

// main.js
import greet from './greeting.js';
greet(); // 输出: Hello from module!

3. 混合导入（默认 + 命名）：

import greet, { add } from './utils.js';

4. 全部导入为一个对象：

import * as utils from './mathUtils.js';
console.log(utils.add(1, 2));
console.log(utils.multiply(3, 4));

要运行ES6模块，需在HTML中指定 type="module"。

<script type="module" src="main.js"></script>

浏览器会按模块方式解析脚本，支持相对路径导入（注意：本地测试建议使用服务器环境，如Live Server）。

基本上就这些。掌握 export 和 import 的基本用法，就能有效组织JS代码结构，实现清晰的模块化开发。不复杂但容易忽略的是文件扩展名和服务器环境要求。

以上就是JS函数如何定义模块化函数_JS模块化函数定义与导出导入方法的详细内容，更多请关注其它相关文章！

下一篇：css动画元素多阶段关键帧控制