ES6 从入门到精通 # 23:ES6 的模块化实现(完结)

Posted 凯小默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 从入门到精通 # 23:ES6 的模块化实现(完结)相关的知识,希望对你有一定的参考价值。

说明

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>

以上是关于ES6 从入门到精通 # 23:ES6 的模块化实现(完结)的主要内容,如果未能解决你的问题,请参考以下文章

ES6 从入门到精通 # 01:ES6 介绍

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6 从入门到精通 # 12:数组的扩展方法一

ES6 从入门到精通 # 12:数组的扩展方法一

ES6 从入门到精通 # 07:解构赋值