ES6学习笔记(十四)module的简单使用
本文最后更新于 93 天前,其中的信息可能已经有所发展或是发生改变。

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"

本文链接:https://likepoems.com/articles/es6-learning-notes-for-simple-use-of-the-module/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇