es6 Module语法
2019-03-10 11:52:21来源:博客园 阅读 ()
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常用参数
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- javascript setinterval 的正确语法如何书写 2019-12-08
- jQuery语法总结和注意事项 2019-10-16
- es6学习笔记(二) 2019-08-14
- Es6常用方法filter 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash