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

1次阅读

javaScript模块通过export/import实现代码封装与复用,具独立作用域严格模式、单次执行等特性;支持命名导出、默认导出及对应导入方式,需模块环境运行。

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

javascript模块是一套组织代码的方式,让变量、函数、类等只在需要的地方暴露,避免全局污染和命名冲突。es6ecmascript 2015)正式引入 exportimport 语法,成为现代前端开发的标准模块机制。

模块的基本特点

每个模块拥有独立的作用域,顶层声明的变量不会自动挂到全局;模块默认是严格模式;模块代码只执行一次,多次导入也只初始化一次(有缓存)。

如何用 export 暴露内容

一个模块可以导出多个东西,方式有两种:

  • 命名导出(named export):用 export 关键字修饰声明,可导出多个,名字必须与定义一致。
    ✅ 正确示例:
    export const PI = 3.14;<br>export function add(a, b) { return a + b; }<br>export class Calculator { ... }
  • 默认导出(default export):每个模块最多一个,导入时可自定义名称,更灵活。
    ✅ 正确示例:
    export default function greet(name) { return `Hello, ${name}`; }

如何用 import 导入内容

导入方式需与导出方式匹配:

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

Veo

Google 最新发布的 ai 视频生成模型

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

查看详情 javascript模块是什么_如何使用import和export

立即学习Java免费学习笔记(深入)”;

  • 导入命名导出:用大括号 {},名字必须完全一致(可重命名用 as
    import { PI, add } from './math.js';<br>import { add as sum } from './math.js';
  • 导入默认导出:不加花括号,可任意起名
    import greet from './greeting.js';
  • 同时导入默认 + 命名:用 import defaultExport, { namedExport } from '...'
    import calc, { PI } from './calculator.js';
  • 整体导入(Namespace import):把所有导出作为对象属性导入
    import * as utils from './utils.js'; // utils.PI, utils.add

使用注意和常见场景

模块语法只在模块环境生效,脚本需显式声明 type="module"

node.js 中需文件后缀为 .mjspackage.json 中设置 "type": "module"

不能在非模块脚本中直接用 import/export;动态导入可用 import('./module.js') 返回 promise,适合按需加载。

基本上就这些。掌握 export/import 的组合方式,就能清晰拆分逻辑、复用代码、管理依赖。

以上就是

text=ZqhQzanResources