登录
首页 >  文章 >  前端

JavaScript模块是什么?怎么导入导出?

时间:2026-01-02 22:12:40 401浏览 收藏

欢迎各位小伙伴来到golang学习网,相聚于此都是缘哈哈哈!今天我给大家带来《JavaScript模块是什么?如何导入导出?》,这篇文章主要讲到等等知识,如果你对文章相关的知识非常感兴趣或者正在自学,都可以关注我,我会持续更新相关文章!当然,有什么建议也欢迎在评论留言提出!一起学习!

JavaScript模块是ES6引入的原生代码复用机制,通过export导出、import导入实现作用域隔离与严格模式执行;支持命名导出、默认导出、统一导出及动态导入import()。

javascript模块是什么_如何导入和导出功能?

JavaScript模块是一组可复用的代码单元,每个模块封装自己的变量、函数或类,不会污染全局作用域。从ES6(ECMAScript 2015)开始,原生支持模块系统,使用exportimport语法实现功能的导出与导入。

模块的基本特征

模块默认是严格模式,顶层thisundefined;模块作用域独立,变量不会自动挂到window上;模块只执行一次,多次导入仍共享同一份实例。

如何导出功能(export)

一个模块可通过多种方式对外暴露内容:

  • 命名导出(Named Export):可导出多个值,名称必须与定义一致
    export const PI = 3.14;
    export function add(a, b) { return a + b; }
    export class Calculator { ... }
  • 默认导出(Default Export):每个模块最多一个,默认导出可使用任意名字导入
    export default function greet(name) { return `Hello, ${name}`; }
  • 统一导出/重命名导出
    export { add as sum, PI as pi };
    export { default as greetFn } from './utils.js';

如何导入功能(import)

导入需在模块文件中进行(不能在普通脚本中直接用,除非设置type="module"):

  • 导入命名导出:必须用大括号,名称要与导出一致
    import { PI, add } from './math.js';
  • 导入默认导出:不用大括号,可自定义名字
    import greet from './greeting.js'; // greet 是默认导出的函数
  • 同时导入默认 + 命名
    import greet, { add, PI } from './math.js';
  • 导入全部并作为命名空间对象
    import * as math from './math.js'; // 使用 math.add(), math.PI
  • 仅执行模块(不导入任何值):用于副作用,如注册全局插件
    import './polyfill.js';

实际使用注意事项

浏览器中使用模块需确保HTML脚本标签声明type="module"

Node.js中需将package.json设为"type": "module",或使用.mjs后缀。

动态导入import()返回Promise,适用于按需加载:
const module = await import('./lazy.js');

理论要掌握,实操不能落!以上关于《JavaScript模块是什么?怎么导入导出?》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>