ES6学习笔记(十四)module的简单使用

发布于 2021-06-19  3,349 次阅读


1、前言

module模块机制是es6新引入的,它解决了作用域的问题,使代码更加规范和结构化。
下面简单的使用一下。

2、基本使用

2.1 模块和脚本的区别

  • 模块代码运行在严格模式下,并且没有任何办法跳出严格模式。
  • 在模块的顶级作用域创建的变量,不会影响到全局作用域,它们只会在模块顶级作用域的内部存在。
  • 模块顶级作用域的this值为undefined。
  • 模块不允许在代码中使用HTML风格的注释。
  • 模块允许到处需要外部引用的方法或变量。
  • 模块可以从其他模块导入绑定。

    2.2 几种使用方法

    2.2.1 导入单个(JS文件中)

    methods.mjs

    function mul(num1, num2) {
    return num1 * num2
    }
    export { mul }

    test.js

    import { mul } from "./methods.mjs";
    console.log(mul(2, 3));

    2.2.2 导入单个(浏览器中)

    HTML中
    方式一:

    //直接通过script标签引用,注意type选择module
    <script type="module" src="test.js"></script>

    运行结果:
    6

方式二:

<script type="module">
    import { mul } from "./methods.mjs"
    console.log("两个数的积是:", mul(2,3));
</script>

方式三:

<script type="module">
    import { mul as cj } from "./methods.mjs"
    console.log("两个数的积是:", cj(2,3));
</script>

运行结果:
6

2.2.3 导入多个

methods.mjs

export var color = "blue"
export let name = "Jerry"
export const count = 6
export function sum(num1, num2) {
    return num1 + num2
}
function sub(num1, num2) {
    return num1 - num2
}
function mul(num1, num2) {
    return num1 * num2
}
export { sub, mul }

// out 为模块的命名空间
let out = {
    data: { color, name, count },
    foo: sum,
    foo2: sub,
    foo3: mul
}
export { out }

HTML中

<script type="module">
    import { sum, sub, mul} from "./methods.mjs"
    console.log("两个数的和是:", sum(3, 2));
    console.log("两个数的差是:", sub(3, 2));
    console.log("两个数的积是:", mul(3, 2));
</script>

运行结果:
两个数的和是: 5
两个数的差是: 1
两个数的积是: 6

使用命名空间:

<script type="module">
    import { out } from "./methods.mjs"
    console.log("两个数的和是:", out.foo(3, 2));
    console.log("两个数的差是:", out.foo2(3, 2));
    console.log("两个数的积是:", out.foo3(3, 2));
    console.log("颜色是", out.data.color);
    console.log("名字是", out.data.name);
    console.log("数量是", out.data.count);
</script>

运行结果:
两个数的和是: 5
两个数的差是: 1
两个数的积是: 6
颜色是 blue
名字是 Jerry
数量是 6

若要完全导入一个模块,使用 import * as methods from "./methods.mjs"


活的像诗一样