初识前端模块化

68 阅读1分钟

前端模块化进化史

第一个阶段:单独一个JS文件夹为一个模块 通过script标签引入 缺点:命名冲突 全局污染 image.png 第二阶段:命名空间 每个模块的属性存放在一个对象中 引入时通过对象名使用 缺点:命名冲突 image.png 第三阶段:函数作用域 image.png 第四阶段:立即执行函数 image.png

模块化规范出现

最初的模块化规范也已经实现了模块化,但是还是有很多开发者难以接受的问题

CommonJs

  1. 一个文件就是一个模块
  2. 每个模块都有单独的作用域
  3. 通过module.export导出成员
  4. 通过require函数载入模块

AMD

  1. 通过define定义模块
  2. 通过require引入模块 image.png

CMD

CommonJsAMD的结合

image.png

ES Module

ESM是原生实现的一种模块化 标准 规范,目前大部分浏览器已经支持

通过给script标签添加type为module使用esm模块

  1. ESM 会自动开启严格模式 最外层this是undefined

image.png

  1. 每个 ESM 都是运行在单独的作用域中

image.png

  1. ESM 会出现跨域

image.png

  1. ESM 会延迟执行脚本 不阻塞页面渲染

image.png