ES6 从入门到精通 # 23：ES6 的模块化实现（完结）

凯小默

于 2022-08-15 02:40:52 发布

阅读量219

点赞数 1

分类专栏： JavaScript 文章标签： es6 javascript

本文链接：https://blog.csdn.net/kaimo313/article/details/125858275

版权

JavaScript 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

说明

ES6 从入门到精通系列（全23讲）学习笔记。

ES6 module

es6 模块功能主要有两个命令构成 export 和 import。

export：用于规定模块的对外接口
import：用于输入其他模块提供的功能

一个模块就是一个独立的文件

我们新建一个 module 文件夹，里面新建 index.js 文件

export const name = "kaimo313";

在这里插入图片描述

在另外的文件里面引入

<!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>Document</title>
</head>
<body>
    <script type="module">
        import {name} from "./module/index.js";
        console.log(name);
    </script>
</body>
</html>

在这里插入图片描述

抛出多个变量

export const name = "kaimo313";
export const age = 313;
export function getName() {
    return "my name is kaimo";
};

或者

const name = "kaimo313";
const age = 313;
function getName() {
    return "my name is kaimo";
};

export {
    name,
    age,
    getName
}

<!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>Document</title>
</head>
<body>
    <script type="module">
        import {name, age, getName} from "./module/index.js";
        console.log(name, age, getName());
    </script>
</body>
</html>

在这里插入图片描述

命名使用 defalut，一个文件只能使用一次

export const name = "kaimo313";
export const age = 313;
export function getName() {
    return "my name is kaimo";
};


let obj = {
    name: "kaimo666777"
}
export default obj;

<!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>Document</title>
</head>
<body>
    <script type="module">
        import kaimo, {name, age, getName} from "./module/index.js";
        console.log(name, age, getName());
        console.log(kaimo)
    </script>
</body>
</html>

在这里插入图片描述

使用 * as

<!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>Document</title>
</head>
<body>
    <script type="module">
        // import kaimo, {name, age, getName} from "./module/index.js";
        // console.log(name, age, getName());
        // console.log(kaimo)
        import * as k from "./module/index.js";
        console.log(k);
        console.log(k.getName());
    </script>
</body>
</html>

在这里插入图片描述

引入类

export const name = "kaimo313";
export const age = 313;
export function getName() {
    return "my name is kaimo";
};

export class Person {
    constructor() {}
    getName() {
        return "kaimo313313";
    }
}

let obj = {
    name: "kaimo666777"
}
export default obj;

<!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>Document</title>
</head>
<body>
    <script type="module">
        // import kaimo, {name, age, getName} from "./module/index.js";
        // console.log(name, age, getName());
        // console.log(kaimo)
        import * as k from "./module/index.js";
        console.log(k);
        console.log(k.getName());
        console.log(new k.Person().getName());
    </script>
</body>
</html>

在这里插入图片描述

凯小默

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6 从入门到精通 # 23：ES6 的模块化实现（完结）

es6 模块功能主要有两个命令构成 export 和 import。我们新建一个 module 文件夹，里面新建 index.js 文件。ES6 从入门到精通系列（全23讲）学习笔记。命名使用 defalut，一个文件只能使用一次。一个模块就是一个独立的文件。在另外的文件里面引入。...
复制链接

扫一扫