es6 Module語法

export 命令

1、概念

export用於定義要輸出的變數（let、var、const、function、class）,定義的變數與值是動態綁定關係。

2、命令格式

1、 export 變數定義

2、 export { 變數名 [ as 另名} ,…}

3、 export default 匿名定義

export default 匿名定義

匿名定義本質上是採用 default 為名稱，與上面2個的區別是在載入時可以不用寫大括弧還能自定義名稱。

import命令

1、 概念

import用於載入export模塊

2、 命令格式

1、 import { 變數名 [as 別名}} from “文件路徑”

2、 import * as 別名 from “文件路徑”（用於整體載入）

3、 import 變數名 from “文件路徑”（用於載入匿名變數）

export與import的複合寫法

1、 概念

先import載入，然後在export定義。

export {…} from  “文件路徑”；

等同於

import {…} from “文件路徑”;

export {…}

1、 整體輸出

export * from “文件路徑”;

2、 別名輸出

export { xxx as ddd} from “文件路徑”

3、 匿名輸出

export { xxx as default} from “文件路徑”

瀏覽器載入

<script type = “module” src=”…”>

或

<script type=”module”>

import {…} from “文件路徑”；

</script>

註意：module 為非同步defer 載入，也就是非同步載入，然後頁面渲染完成後執行腳本。

import() 函數

import函數是動態載入模塊或非模塊腳本並無靜態連接，返回一個promise對象，可獲取載入狀態。

1、 格式

import(“文件路徑”)

2、例子

import(…).then(module=>module.變數)

輸出變數被當前參數轉給then函數了。

例子：匿名與非匿名載入

// a.js
export default function (val) {
    console.log(val);
}

export function test(val) {
    console.log(val);
}

<script type="module">
        'use strict';
        import print,{test} from "./a.js";
        print("ss");  // 匿名
        test("test"); // test
</script>

例子：整體載入

    <script type="module">
        'use strict';
        import * as target from "./a.js";
        target.test("test函數");
        target.default("匿名變數")
    </script>

例子：動態載入

// 瀏覽器並沒有實現動態導入模塊
<script type="module">
    import("./a.js").then(module => {
        module.test("你好");
        module.default("哈哈");
    });
</script>