javascript中导出多个工具函数最常用命名导出,包括逐个export声明、export{}批量导出、as重命名及混合默认+命名导出,需注意模块类型限制和导入语法匹配。

在 JavaScript 中,使用 export 导出多个工具函数有多种方式,最常用的是命名导出(named export)和默认导出(default export)配合对象解构。下面介绍几种清晰、实用、符合现代开发习惯的做法。
用命名导出逐个导出函数
这是最推荐的方式,语义清晰、便于按需导入、支持 tree-shaking:
// utils.js
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
<p>export function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}</p><p>export function isEmpty(obj) {
return obj == null || Object.keys(obj).length === 0;
}</p>外部导入时可选择性引入:
// main.js
import { formatDate, isEmpty } from './utils.js';
<p>console.log(formatDate(Date.now())); // 如:'2024/5/20'
console.log(isEmpty({})); // true</p>用 export {} 批量导出已声明的函数
适合函数已在文件中定义完毕,想统一导出时使用,更简洁:
// utils.js
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
<p>function pluralize(word, count) {
return count === 1 ? word : word + 's';
}</p><p>export { capitalize, pluralize };</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common"><img
src="https://img.php.cn/upload/skill/000/000/081/179222954019613.jpg" alt="Java Maven Common" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="overflowclass">Java Maven Common</a>
<p class="overflowclass">Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>组合导出:命名导出 + 默认导出(慎用)
可以同时提供一个默认对象(如工具集)和单独的命名函数,但不建议滥用,默认导出应有明确主次:
// utils.js
export function throttle(fn, limit) { /* ... */ }
export function deepClone(obj) { /* ... */ }
<p>// 默认导出一个常用集合(非必需,按需设计)
export default {
throttle,
deepClone,
formatDate, // 注意:formatDate 需先声明或从别处导入
};</p>对应导入方式:
import tools, { throttle } from './utils.js';
tools.throttle(...); // 通过默认对象调用
throttle(...); // 也可直接用命名导入导出时重命名避免冲突
当函数名可能与其他模块冲突,或想提供更语义化的导入名时可用 as:
export { formatDate as dateFmt, debounce as waitUntilIdle };导入时即可使用新名字:
import { dateFmt, waitUntilIdle } from './utils.js';注意:所有 export 语法只在 ES 模块(type="module" 或 .mjs 文件)中生效;Node.js 中需启用 "type": "module",浏览器中 script 标签要加 type="module"。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










