React 教程

浏览4967
更新时间2025-08-20

Modules

JavaScript modules allow you to break up your code into separate files.

This makes it easier to maintain the code-base.

ES Modules rely on the import and export statements.


Export

You can export a function or variable from any file.

Let us create a file named person.js, and fill it with the things we want to export.

There are two types of exports: Named and Default.


Named Exports

You can create named exports two ways. In-line individually, or all at once at the bottom.

In-line individually:

person.js

export const name = "Jesse"
export const age = 40

All at once at the bottom:

person.js

const name = "Jesse"
const age = 40

export { name, age }

Default Exports

Let us create another file, named message.js, and use it for demonstrating default export.

You can only have one default export in a file.

实例

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Import

You can import modules into a file in two ways, based on if they are named exports or default exports.

Named exports must be destructured using curly braces. Default exports do not.

Import from named exports

Import named exports from the file person.js:

import { name, age } from "./person.js";

Import from default exports

Import a default export from the file message.js:

import message from "./message.js";

相关视频

更多

免费

Web前端开发极速入门
初级Web前端开发极速入门

221969次学习

收藏

免费

前端入门_HTML5
初级前端入门_HTML5

624610次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

240745次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

397492次学习

收藏

免费

独孤九贱(1)_HTML5视频教程
初级独孤九贱(1)_HTML5视频教程

623372次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时 | 62.5万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时 | 39.7万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时 | 73.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号