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

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

狼影

发布： 2025-12-23 16:21:30

原创

440人浏览过

JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。

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

JavaScript 的模块化，就是把代码拆成独立、可复用的文件（模块），每个模块封装自己的变量、函数或类，不污染全局作用域，还能按需加载和依赖管理。现代浏览器和 Node.js（v14+）都原生支持 ES 模块（ESM），核心就是 export 和 import。

export：怎么对外暴露内容？

一个模块可以导出多个东西，方式灵活：

命名导出（named export）：用 export 关键字逐个导出，名字必须一致才能导入。适合导出多个值。

math.js

export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class Calculator {
  multiply(x, y) { return x * y; }
}

登录后复制

默认导出（default export）：每个模块最多一个，导入时可自定义名称，适合“主功能”或单例。

utils.js

立即学习“Java免费学习笔记（深入）”；

造物云营销设计

造物云是一个在线3D营销设计平台，0基础也能做电商设计

查看详情

export default function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

登录后复制

统一导出 / 重命名导出：用 export { ... } 批量导出，支持别名（as）。

const name = "Alice";
const age = 30;
export { name as userName, age };

登录后复制

import：怎么引入其他模块？

导入必须在模块顶层（不能在 if 或函数里），且路径要带扩展名（如 .js）或以 /、./、../ 开头：

导入命名导出：用大括号，名字必须和导出一致（或用 as 重命名）。

import { PI, add, Calculator } from './math.js';
import { userName as myName, age } from './user.js';

登录后复制

导入默认导出：不用大括号，可任意起名。

import debounce from './utils.js'; // ✅ 正确
import { default as debounce } from './utils.js'; // ❌ 不必要

登录后复制

混合导入：默认 + 命名，顺序不限，但默认必须在前（语法要求）。

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

登录后复制

只执行不导入：用于运行副作用（如初始化、打补丁），不取值。

import './polyfill.js';

登录后复制

实际使用要注意什么？

模块不是开箱即用，得看环境：

浏览器中：HTML 脚本标签要加 type="module"，否则 import/export 会报错。

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

登录后复制

Node.js 中：文件后缀为 .mjs，或 package.json 里写 "type": "module"。
路径必须明确：不能写 import { add } from 'math'（没扩展名、没相对/绝对路径），会报错；应写 from './math.js'。
不能动态 import 变量：import(url) 是异步函数，但 url 不能是拼接的变量（打包工具限制），常用于按需加载。

if (condition) {
  const module = await import('./feature.js'); // ✅ 动态导入
  module.doSomething();
}

登录后复制

常见误区提醒

容易踩坑的地方：

export 后不能跟 var/let/const 声明语句（语法错误），要分开写或直接导出表达式。
import 必须在顶层，不能放在 if、for 或函数内（静态分析需要）。
模块是单例：多次 import 同一模块，只会执行一次，所有导入共享同一份导出值（包括对象引用）。
循环导入（A 导入 B，B 又导入 A）不会报错，但未执行完的模块会返回空对象，需注意初始化顺序。

基本上就这些。模块化让代码更清晰、可维护、易测试，import/export 是基础，用熟了自然就顺了。

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

大家都在看：

javascript原型是什么_原型链是如何工作的 javascript如何实现滚动效果_scroll事件有哪些性能优化点 javascript如何操作二进制数据_ArrayBuffer和Blob有何区别 javascript类怎样定义_它真的是基于原型的语法糖吗？ javascript能做什么_为什么它被称为全栈开发语言