浏览器规范(ES module)和 node.js 规范(Common JS)

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对应