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

starrylsi
2024-03-23 / 7 评论 / 119 阅读 / 正在检测是否收录...

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

评论 (7)

取消
  1. 头像
    efocjwlkqg
    Windows 10 · Google Chrome
    @

    想想你的文章写的特别好

    回复
  2. 头像
    etrjbaubys
    Windows 10 · Google Chrome
    @

    怎么收藏这篇文章?

    回复
  3. 头像
    klgbipwwiq
    Windows 10 · Google Chrome
    @

    想想你的文章写的特别好https://www.237fa.com/

    回复
  4. 头像
    plyuismvot
    Windows 10 · Google Chrome
    @

    看的我热血沸腾啊https://www.ea55.com/

    回复
  5. 头像
    fyfffzfhai
    Windows 10 · Google Chrome
    @

    看的我热血沸腾啊www.jiwenlaw.com

    回复
  6. 头像
    jwpdawlnbe
    Windows 10 · Google Chrome
    @

    不错不错,我喜欢看 www.jiwenlaw.com

    回复
  7. 头像
    vvklmgnhbo
    Windows 10 · Google Chrome
    @

    文章的确不错啊https://www.cscnn.com/

    回复