JS模块怎么导入_JavaScriptES6模块导入导出使用方法详解-js教程-PHP中文网

JS模块怎么导入_JavaScriptES6模块导入导出使用方法详解

絕刀狂花

发布： 2025-11-15 20:53:02

原创

331人浏览过

ES6模块系统通过export和import实现代码封装与复用，支持命名导出、默认导出及混合导入方式，需在HTML中使用type="module"并保留.js后缀，提升项目可维护性。

js模块怎么导入_javascriptes6模块导入导出使用方法详解

在ES6中，JavaScript引入了原生的模块系统，让开发者可以更清晰地组织代码。模块的核心是导出（export）和导入（import），实现功能的封装与复用。

1. 模块导出（export）

一个JS文件可以作为模块，通过export关键字将变量、函数或类暴露出去，供其他文件使用。

命名导出（Named Exports）：可以导出多个值。

// mathUtils.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const PI = 3.14159;

登录后复制

也可以统一导出：

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

// mathUtils.js
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const PI = 3.14159;
<p>export { add, multiply, PI };</p>

登录后复制

默认导出（Default Export）：每个模块只能有一个默认导出，适合导出主功能，如一个类或主函数。

// calculator.js
export default class Calculator {
  static add(a, b) {
    return a + b;
  }
}

登录后复制

2. 模块导入（import）

使用import从其他模块加载内容。

导入命名导出：

// main.js
import { add, multiply } from './mathUtils.js';
console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6

登录后复制

可以重命名导入：

火山方舟

火山引擎一站式大模型服务平台，已接入满血版DeepSeek

查看详情

import { add as sum, PI } from './mathUtils.js';
console.log(sum(1, 2)); // 3

登录后复制

导入默认导出：

// main.js
import Calculator from './calculator.js';
console.log(Calculator.add(5, 3)); // 8

登录后复制

注意：默认导入时名字可自定义，不需与导出时一致。

同时导入默认和命名导出：

// main.js
import Calculator, { add, PI } from './mathUtilsAndCalc.js';

登录后复制

导入所有内容到一个对象：

import * as MathLib from './mathUtils.js';
console.log(MathLib.add(2, 3));     // 5
console.log(MathLib.multiply(2, 4)); // 8
console.log(MathLib.PI);            // 3.14159

登录后复制

3. 使用模块的实际注意事项

浏览器中使用模块需要满足以下条件：

HTML中引入模块需添加type="module"：

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

登录后复制

模块路径必须是完整文件名，包括.js后缀（不能省略）；
模块运行在严格模式下，无需手动写"use strict";；
模块支持相对路径（./, ../）或绝对路径；
在Node.js环境中需启用ES模块支持（如使用.mjs扩展名或在package.json中设置"type": "module"）。

4. 常见使用场景示例

假设有一个工具模块utils.js：

// utils.js
export const formatPrice = (price) => `$${price.toFixed(2)}`;
export const isEmpty = (str) => str.trim() === '';
export default function log(msg) {
  console.log('[LOG]', msg);
}

登录后复制

在主文件中使用：

// app.js
import logger, { formatPrice, isEmpty } from './utils.js';
<p>logger('App started');
console.log(formatPrice(19.9)); // $19.90
console.log(isEmpty(''));       // true</p>

登录后复制

基本上就这些。掌握export和import的几种形式，就能高效组织现代JavaScript项目。模块化让代码更清晰、可维护性更强，是前端开发的必备技能。

以上就是JS模块怎么导入_JavaScriptES6模块导入导出使用方法详解的详细内容，更多请关注php中文网其它相关文章！