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>