前端知识点——ES Module

最新推荐文章于 2024-09-22 17:40:25 发布

兔走丶

最新推荐文章于 2024-09-22 17:40:25 发布

阅读量560

点赞数

分类专栏：不当切图仔文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/AeoRus/article/details/117793901

版权

不当切图仔专栏收录该内容

23 篇文章

订阅专栏

本文探讨了ES Module的基本特性和使用方式，包括自动采用严格模式、独立的作用域以及延迟执行等。重点讲解了导出与导入机制，强调export default用于导出默认值，以及模块中导出和导入的是引用而非拷贝，这意味着模块内变量的更改会影响到引用该变量的地方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

ES Module

基本特性

使用type="module"就可以使用ES Module的标准执行其中的JS代码了
自动采用严格模式，忽略use strict
每个模块都是一个单独作用域
访问的地址必须是配置了CORS
会自动延迟执行脚本，当页面渲染完才会去执行脚本，这样就不会阻塞页面的加载了

<!-- 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 --------- start -->
  <script type="module">
    console.log('module_1') // module_1
  </script>
  <!-- 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 --------- end -->

  <!-- 自动采用严格模式，忽略use strict --------- start -->
  <script type="module">
    console.log('module_2', this) // module_2 undefined
  </script>
  <!-- 自动采用严格模式，忽略use strict --------- end -->

  <!-- 每个模块都是一个单独作用域 --------- start -->
  <script type="module">
    var a = 100
    console.log('module_3', a) // module_3 100
  </script>
  <script type="module">
    console.log('module_4', a) // module_4 a is not defined
  </script>
  <!-- 每个模块都是一个单独作用域 --------- end -->

  <!-- 访问的地址必须是配置了CORS --------- start -->
  <script type="module" src="https://libs.baidu.com/jequry@3.4.1/dist/jequry.min.js">
    console.log('module_5') // module_5 跨域报错
  </script>
  <script type="module" src="https://unpkg.com/jequry@3.4.1/dist/jequry.min.js">
    console.log('module_6') // module_6 请求正常
  </script>
  <!-- 访问的地址必须是配置了CORS --------- end -->

  <!-- 会自动延迟执行脚本，当页面渲染完才会去执行脚本 --------- start -->
  <script type="module">
    console.log('module_7') // 渲染中不出现log，渲染完后 -> module_7
  </script>
  <!-- 会自动延迟执行脚本，当页面渲染完才会去执行脚本 --------- end -->

导出导入

export {} 和 import {} 有点像对象字面量，但是完全不同，这是固定语法，如果想到处对象，需要用 export default {}
导出的是引用，而不是拷贝了一份，比如模块中修改了变量的值，那引用的地方该变量也会变
导入的成员是只读的，无论导出的是不是const定义的

// 导出
export const name = 'aeorus'
const lastName = 'Yin'
const firstName = 'YiWen'
export {
  lastName as ln // 使用as别名导出
}
// 导入
import {
  name,
  firstName as fn, // 使用as别名导入
  ln
} from './module'
console.log(name, fn, ln) // aeorus YiWen Yin