为了账号安全,请及时绑定邮箱和手机立即绑定

es6 Module语法

标签:
JavaScript

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.jsexport 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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消