es6 Module语法

2019-03-10 11:52:21来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 


原文链接:https://www.cnblogs.com/whnba/p/10490590.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ajax常用参数

下一篇:vue3+typescript引入外部文件