ES module 特性
添加type="module"属性
<!-- ) 通过script 添加 type="module"属性,就可以以ES Module 的标准执行其中的JS代码规范 --> <script type="module"></script>
自动采用严格模式 忽略 'use strict
<!-- 1) ESM 自动采用严格模式 忽略 'use strict' --> <script type="module"> console.log(this); </script>
每个ESM 都运行在单独的私有作用域中
<!-- 2) 每个ESM 都运行在单独的私有作用域中 --> <script type="module"> let foo = 100; console.log(foo); </script> <script type="module"> console.log(foo); // foo未定义将会报错 </script>
ESM是通过 CORS 的方式请求外部 JS 模块
<!-- 3) ESM是通过 CORS 的方式请求外部 JS 模块 --> <script type="module" src="一个支持cors的地址"></script>
ESM的 script 标签会延迟脚本执行
<!-- 4) ESM的 script 标签会延迟脚本执行 --> <script defer type="module" src="demo.js"></script> <p>需要显示的内容</p>
模块的导入导出
导出
- 单变量导出
- 多变量导出
- 导出函数
- 导出对象
- 导出类
导入
- 导入整个模块
- 导入单个接口
- 动态导入
- 仅为副本作用导入一个模块
注意点
- 区分花括号
// import.js
const name = "凌思";
const age = "22";
const info = { name, age }; // 注意和下面的花括号区分
export { name, age }; // 这里的花括号不是es6语法中的解构,它是export的固定搭配
export default info;
// export.js
import {name,age} from import.js// 这里的花括号不是es6语法中的解构,它是import的固定搭配
- 理解内存地址和只读
// export.js
import {name,age} from import.js// 这里的花括号不是es6语法中的解构,它是import的固定搭配
name = '李四' //
console.log(name)//这里会报错因为导入的变量只读
- 默认导出可以在导入时修改名称
// export.js
import infoNameAge from import.js// 这里的infoNameAge对应
想想你的文章写的特别好
怎么收藏这篇文章?
想想你的文章写的特别好https://www.237fa.com/
看的我热血沸腾啊https://www.ea55.com/
看的我热血沸腾啊www.jiwenlaw.com
不错不错,我喜欢看 www.jiwenlaw.com
文章的确不错啊https://www.cscnn.com/