Module的两种导出与导入

Maxine
107 阅读3分钟

一、export default 导出和对应的 import 导入

1.认识导出和导入

对于导出的东西，我们可以使用 import 将其导入，导出的目的是我想将我当前的一些东西暴露出去供外部使用，导入就是将暴露出去的东西导入进来，然后就可以访问到暴露出来的那些东西了

首先我们思考一个问题：
一个模块没有被导出，那么他可以被导入吗？
比如： module.js文件

const username = "maxine"
console.log(username);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>export default 和对应的 import</title>
</head>
<body>
    <script type="module">
    // 导入未导出的模块
        import './module.js'
    </script>
</body>
</html>

image.png

module.js这个文件的内容被正常执行并在控制台正确输出了。
所以说，一个模块没有被导出，也可以将其导入，且被导入的代码都会执行一遍，也仅会执行一遍，意思就是说，尽管你写了三遍，控制台也只打印一个 maxine 。

 import './module.js'
 import './module.js'
 import './module.js'

⚠️ 还有一个需要注意的就是，因为我们这里使用的是ES6的语法，而script标签默认type="text/javascript",浏览器默认将代码作为js解析会出现Uncaught SyntaxError: Cannot use import statement outside a module这个错误，所以我们需要在script标签中写上type="module"

2.基本用法

我们在 module.js 中定义一个对象，然后通过import导入，并在 html 中访问该对象的属性。

const user = {
    name:"maxine",
    age:11
}
// 导出
export default user;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>export default 和对应的 import</title>
</head>
<body>
    <script type="module">
    // 我们导出的虽然叫 user ，但是其实我们导入的时候不需要必须使用user来保持一致，是可以随便起名字的
        import user from './module.js'
        console.log(user.name);
        console.log(user.age);
    </script>
</body>
</html>

image.png 那如果我们想导出多个对象，我们可以像下面这样吗？

const user = {
    name:"maxine",
    age:11
}
const student = {
    id:1001,
    sex:"male"
}
// 导出

export default user;
export default student;

显然不行，因为控制台会出现module.js:11 Uncaught SyntaxError: Identifier '.default' has already been declared
因为一个模块不能具有多个默认导出，只能有一个 export default

二、export 导出和对应的 import 导入

基本用法

导出方式分为两种：

// 第一种
// export const age = 11;
// 第二种
const age = 11;
export {age}

导入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>export default 和对应的 import</title>
</head>
<body>
    <script type="module">
    // 不能随意命名
    import {age} from './module.js'
    </script>
</body>
</html>

多个导出

同时导出多个：

const age = 11;
// 这里不能是匿名函数，因为我们导入的时候需要使用到函数名
function fn(){}
class People {}
// 导出多个
export {age, fn, People}

导入：

import { age, fn, People } from './module.js'

导出导入时起别名

通过使用 as 起别名

import { age, fn as handleClick, People } from './module.js'

这样使用这个函数时，我们就使用 handleClick，而不是fn了。

整体导入

整体导入会导入所有输出，包括通过 export default 导出的。

const age = 11;
function fn(){}
class People {}
// 导出多个
export {age, fn, People}
export default 18

导入：

<body>
<script type="module">
// 通配符 * ，表示所有的，我们通过 as 给这个导出的整体起个名字，就可以访问所以的导入内容了
import * as obj from './module.js'
console.log(obj);
</script>
</body>

image.png

同时导入

同时导入就是说，既有 export default 又有 export，我们除了向上述整体导入的方式外，还可以通过以下方式导入,
比如说还是这个 js 文件：

const age = 11;
function fn(){}
class People {}
// 导出多个
export {age, fn, People}
export default

第一种：分开导入

// 导入 export 内容
import { age, fn, People } from './module.js'
// 导入 export defaul 内容
import { age2 } from './module.js'

第二种：同时导入

import age2, { age, fn, People } from './module.js'

⚠️使用同时导入，一定是 export default 导出内容在前。

avatar
文章
阅读
粉丝