前端模块化进化史
第一个阶段:单独一个JS文件夹为一个模块 通过script标签引入 缺点:命名冲突 全局污染
第二阶段:命名空间 每个模块的属性存放在一个对象中 引入时通过对象名使用 缺点:命名冲突
第三阶段:函数作用域
第四阶段:立即执行函数
模块化规范出现
最初的模块化规范也已经实现了模块化,但是还是有很多开发者难以接受的问题
CommonJs
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过
module.export导出成员 - 通过
require函数载入模块
AMD
- 通过
define定义模块 - 通过
require引入模块
CMD
是CommonJs和AMD的结合
ES Module
ESM是原生实现的一种模块化 标准 规范,目前大部分浏览器已经支持
通过给script标签添加type为module使用esm模块
- ESM 会自动开启严格模式 最外层this是undefined
- 每个 ESM 都是运行在单独的作用域中
- ESM 会出现跨域
- ESM 会延迟执行脚本 不阻塞页面渲染