讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript模块如何导出_如何导入其他模块?

轻杰吖_4253

轻杰吖_4253

发布时间:2025-12-18 22:39:48

|

653人浏览过

|

来源于php中文网

原创

JavaScript模块通过export导出、import导入,支持命名导出/导入和默认导出/导入,可重命名、批量转发;路径需带扩展名或./开头,浏览器需type="module",Node.js需配置"type":"module"或.mjs后缀。

javascript模块如何导出_如何导入其他模块?

JavaScript模块通过 export 导出,用 import 导入其他模块。ES6 模块是静态语法,必须写在文件顶层,不能放在条件语句或函数里。

如何导出(export)

导出分两种:命名导出和默认导出,可混用但推荐保持简洁。

Comprehensive Three.js 3D graphics reference
Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载
  • 命名导出:一个文件可多次使用 export,导出变量、函数、类等,导入时需用对应名称
// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
  • 默认导出:每个模块最多一个 export default,导入时名字可自定,适合导出主功能
// utils.js
export default function debounce(fn, delay) { ... }
  • 重命名导出 / 批量导出:可用 as 改名,或用 export { ... } from 'path' 转发
export { add as sum, PI as pi } from './math.js';
export { default as debounce } from './utils.js';

如何导入(import)

导入也分命名导入和默认导入,路径必须带扩展名(如 .js)或为相对/绝对路径,不能省略 ./ 开头。

  • 导入命名导出:用大括号,名字必须与导出一致(或用 as 重命名)
import { PI, add } from './math.js';
import { add as sum } from './math.js';
  • 导入默认导出:不加大括号,名字可任意取
import debounce from './utils.js';
import myDebounce from './utils.js'; // 也可以
  • 混合导入:默认 + 命名,顺序不限,但默认必须在前(语法要求)
import debounce, { PI, add } from './utils.js';
  • 只执行模块(无导入):适用于仅需副作用的脚本(如 polyfill)
import './polyfill.js';

常见注意事项

  • 模块路径是相对于当前文件的,不是 HTML 页面或终端路径
  • 浏览器中使用模块需加 type="module":<script type="module" src="main.js"></script>
  • Node.js 中启用模块需设置 "type": "module" 在 package.json,或用 .mjs 后缀
  • 动态导入用 import() 函数,返回 Promise,适合按需加载
button.addEventListener('click', async () => {
const { renderChart } = await import('./charts.js');
renderChart();
}); 基本上就这些。导出和导入搭配得当,就能组织好代码结构,避免全局污染,也方便复用和测试。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1975

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2682

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

936

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2999

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

386

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

335

2025.12.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

1938

2023.09.20

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn