React ES6 块

模块

JavaScript 模块允许您将代码分解为单独的文件。

这使得维护代码库变得更容易。

ES 模块依赖于 import 导入和 export 导出语句。

导出

您可以从任何文件导出函数或变量。

让我们创建一个名为 person.js 的文件，并将要导出的内容填入其中。

导出有两种类型：命名导出和默认导出。

命名输出

可以通过两种方式创建命名导出:

单独排列
底部同时排列

单独排列:

person.js

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

底部同时排列:

person.js

const name = "Jesse"
const age = "40"
export { name, age }

默认导出

让我们创建另一个文件，名为 message.js，并使用它演示默认导出。

一个文件中只能有一个默认导出。

实例

message.js

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

导入

根据模块是命名导出还是默认导出，可以通过两种方式将模块导入到文件中。

命名导出必须使用大括号进行分解。默认导出不支持。

导入命名导出

从 person.js 文件导入命名导出:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script type="module">
import { name, age } from "./person.js";
document.getElementById("demo").innerHTML = "My name is " + name;
document.getElementById("demo").innerHTML += ", I am " + age + ".";
</script>
</body>
</html>

运行一下

从默认导出导入

从文件 message.js 导入默认导出:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script type="module">
import message from "./message.js";
document.getElementById("demo").innerHTML = message();
</script>
</body>
</html>