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

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

什么是模块化函数

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

使用ES6模块语法定义与导出函数

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

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

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

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

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

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

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

导入模块中的函数

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

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

// main.js
import { add, multiply } from './mathUtils.js';
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));

在HTML中使用模块

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

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

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