JavaScript模块化_什么叫js模块化-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51573433/article/details/124555666

JS模块化

1. 什么是 JS 模块化？
2. 模块导出
- 2.1) 默认导出
- 2.2) 命名导出
3. 模块导入
- 3.1) 默认导出的导入
- 3.2) 命名导出的导入

1. 什么是 JS 模块化？

一种将 JavaScript 程序拆分为可按需导入的单独模块的机制

即通俗来说，就是将一个 JS 程序文件，按着类别分模块以此拆分成多个小文件，再对这些小文件根据自己的需求进行拼装。

这样做它的好处就显而易见了：

便于管理代码
提高代码复用性
避免全局变量污染

那么，如何使用它呢？

2. 模块导出

对于模块的导出，我们可以使用 export 语句

export 语句用于从模块中导出实时绑定的函数、对象或原始值

它分为以下两类导出：

默认导出
命名导出

接下来，我们看看如何使用它们

首先，写一个 imformation.js 文件作为一个模块

const Xixi = {
    name: 'XiXi',
    age: 18,
    hobby: 'basketball'
}

const Haha = {
    name: 'Haha',
    age: 18,
    hobby: 'football'
}

2.1) 默认导出

对于默认导出，每个模块只能有一个，它的语法如下：

export default XXX;

XXX 为要导出的东西，对于默认导出，XXX 可以是一个对象，也可以是一个函数，也可以是一个已存在的变量名
导出函数 export default () => {};
导出对象 export default {};
导出已存在的变量名 export default Xixi;

在这里，我们将 Xixi 导出

const Xixi = {
    name: 'XiXi',
    age: 18,
    hobby: 'basketball'
}

const Haha = {
    name: 'Haha',
    age: 18,
    hobby: 'football'
}

// 在这里，我们将 Xixi 导出，就在代码结尾处加上这条语句
export default Xixi;

Notes:

默认导出只可以有一个且只能导出一个值

2.2) 命名导出

对于命名导出，每个模块中可以有多个，它的语法如下：

export XXX;

XXX 必须是一个声明或着语句（不能导出匿名函数或者一个未命名对象）
可以导出前面已经存在的变量 export { Xixi };
可以导出一条语句 export const age = 18; / export function speak() {};

这里，将 Xixi 和 Haha 导出：

const Xixi = {
    name: 'XiXi',
    age: 18,
    hobby: 'basketball'
}

const Haha = {
    name: 'Haha',
    age: 18,
    hobby: 'football'
}

// 对于导出已存在变量，记得用 {} 包裹起来
export { Xixi, Haha };

在进行导出时，我们还可以起别名，如：

export { Xixi as p1, Haha };

3. 模块导入

对于模块的导入，我们可以使用 import 语句

import 语句用于导入由另一个模块导出的绑定

它的使用根据导出的方式来决定：

我们先创建一个 html 文件，将想导入的模块加载进来

<script type=“module”> 中 type="module" 属性用于指示引入的模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module</title>
</head>
<body>
    <!-- 如果这个 script 标签想要导入模块，
        这里必须加个属性 type="module" -->
    <script type="module">
    </script>
</body>
</html>

3.1) 默认导出的导入

它的语法如下：

import XXX from '文件路径';

XXX 对于默认导出的导入，我们可以随便命名，因为默认导出只导出一个值，没有命名要求

默认导出的语句：

export default Xixi;

在这里将之前导出的 Xixi 导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module</title>
</head>
<body>
    <script type="module">
        import Xixi from './infromation.js';
        console.log(Xixi.name, Xixi.age, Xixi.hobby);
    </script>
</body>
</html>

在这里插入图片描述

3.2) 命名导出的导入

对于命名导出的导入，我们需要将想要导入的声明或语句的名字与导出时一一对应，用 {} 包裹起来
它的语法如下：

import XXX from '文件路径';

XXX 对于命名导出的导入时，不能随意命名，必须与导出时名字一一对应，可以选取我们想要的声明或语句导入

命名导出的语句：

export { Xixi, Haha };

在这里，我们将 Xixi 和 Haha 导入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module</title>
</head>
<body>
    <script type="module">
        import { Xixi, Haha } from './infromation.js';
        console.log(Xixi.name, Xixi.age, Xixi.hobby);
        console.log(Haha.name, Haha.age, Haha.hobby);
    </script>
</body>
</html>

如果命名导出时使用了别名，它的导入也要用别名与之对应，如：
命名导出：

export { Xixi as p1, Haha };

它的导入：

import { p1, Haha } from './infromation.js';
console.log(p1.name, p1.age, p1.hobby);

在它进行导入时，也可以使用别名进行导入：

import { p1, Haha as p2 } from './infromation.js';
console.log(p1.name, p1.age, p1.hobby);
console.log(p2.name, p2.age, p2.hobby);

Notes

同时导入export default 和 export 导出的内容：
当对于默认导出的导入和命名导出的导入在同一条语句时，默认导出的导入要在前面！，如
导出：

export default Xixi;
export { Haha };

导入：

// Xixi 作为默认导出的值，必须在命名导出前
import Xixi, { Haha } from './infromation.js';

整体导入所有导出

import * as people from './infromation.js';
console.log(people.default.name);
console.log(people.Haha.name);

在这里插入图片描述
对于导入，这里介绍的是静态的 import，还有动态的 import，对于它的用法可以去 MDN 文档: import 中进行学习。