JS函数如何定义模块化函数_JS模块化函数定义与导出导入方法-js教程-PHP中文网

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

雪夜

发布： 2025-11-06 17:44:02

原创

998人浏览过

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

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

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

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

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 语句从其他模块加载函数。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

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模块化函数定义与导出导入方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：