javascript模块化是什么_如何使用import和export？-js教程-PHP中文网

javascript模块化是什么_如何使用import和export？

夢幻星辰

发布： 2025-12-21 19:06:08

原创

421人浏览过

JavaScript模块化通过export导出、import导入实现代码拆分与复用，支持命名导出（需大括号匹配名）和默认导出（可自定义名），须注意静态语法、路径完整、浏览器需type="module"等规则。

javascript模块化是什么_如何使用import和export？

JavaScript模块化是把代码拆分成独立、可复用的文件，每个文件封装自己的功能和作用域，避免全局污染和命名冲突。核心机制就是 export 输出内容，import 引入使用。

一个模块里可以多次用 export 导出多个东西，也可以用 export default 指定默认导出（每个模块最多一个）。

// math.js
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export class Calculator {
  multiply(x, y) { return x * y; }
}

登录后复制

// utils.js
export default function formatDate(date) {
  return date.toISOString().split('T')[0];
}

登录后复制

根据导出方式不同，导入语法也不同。注意路径必须写全（如 ./math.js），浏览器中需加 type="module" 才能启用 ES 模块。

// main.js
import { PI, add, Calculator } from './math.js';
import { add as sum } from './math.js'; // 重命名

登录后复制

import formatDate from './utils.js';
import myFormat from './utils.js'; // 也可以叫 myFormat

登录后复制

import formatDate, { PI, add } from './math.js';

登录后复制

ES 模块是静态的，import/export 必须写在顶层，不能放在 if 或函数里；路径是相对或绝对 URL，不支持 Node.js 的自动扩展（如 .js 后缀不能省）；浏览器中 script 标签要加 type="module"：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

204

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

登录后复制

建两个文件：

// greet.js
export function hello(name) {
  return `Hi, ${name}!`;
}
export default function bye() {
  return 'See you later!';
}

登录后复制

// index.js
import goodbye, { hello } from './greet.js';
console.log(hello('Alice')); // Hi, Alice!
console.log(goodbye());      // See you later!

登录后复制

在 HTML 中引入：，打开控制台就能看到结果。

基本上就这些。不复杂但容易忽略细节，比如路径、后缀、script 类型——对了，别忘了浏览器控制台报错时先看是不是漏了 type="module"。

以上就是javascript模块化是什么_如何使用import和export？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：